Resumo do uso de localStorage e sessionStorage

No HTML5, um novo recurso localStorage é adicionado. Este recurso é usado principalmente como armazenamento local para resolver o problema de espaço de armazenamento insuficiente de cookies (o espaço de armazenamento de cada cookie no cookie é de 4k. Navegadores gerais em localStorage O tamanho suportado é 5M). . Este localStorage será diferente em navegadores diferentes.

1. localStorage expande o limite de cookies de 4K

2. LocalStorage pode armazenar diretamente os primeiros dados solicitados localmente. Isso equivale a um banco de dados de 5M para a página front-end. Em comparação com os cookies, ele pode economizar largura de banda, mas está disponível apenas em navegadores de última geração.

1. Os navegadores não são uniformes em tamanho e o atributo localStorage só é compatível com versões do IE superiores ao IE8.

2. Atualmente, todos os navegadores limitam o tipo de valor de localStorage ao tipo string. Isso requer alguma conversão para nossos tipos de objetos JSON comuns diários.

3. localStorage não pode ser lido no modo de privacidade do navegador.

4. LocalStorage essencialmente lê strings. Se você armazenar muito conteúdo, ele consumirá espaço de memória e fará com que a página fique travada.

5. localStorage não pode ser rastreado por rastreadores

A única diferença entre localStorage e sessionStorage é que localStorage pertence ao armazenamento permanente, enquanto sessionStorage pertence a sessionStorage. Quando a sessão terminar, os pares de valores-chave em sessionStorage serão limpos.

Aqui usamos localStorage para analisar

Suporte do navegador para localStorage:

Uma declaração especial aqui é que se você estiver usando o navegador IE, então UserData será usado como armazenamento. A principal explicação aqui é o conteúdo do localStorage, então userData não será muito explicado e, na opinião pessoal do blogueiro, não há. É necessário aprender o uso de UserData, porque o atual IE6/IE7 está em fase de eliminação, e muitos desenvolvimentos de páginas hoje envolvem tecnologias emergentes como HTML5/CSS3, por isso geralmente não os utilizamos para compatibilidade.

Primeiro, ao usar localStorage, precisamos determinar se o navegador suporta o atributo localStorage.

 if(!window.localStorage){ alert(navegador suporta armazenamento local); return false }else{ //Lógica principal de negócios}

Existem três métodos para escrever em localStorage. Aqui iremos apresentá-los um por um.

 if(!window.localStorage){ alert(o navegador suporta armazenamento local); return false;else{ var storage=window.localStorage; ; //Escreva o campo c storage.setItem(c,3); console.log(typeof storage[a]); armazenamento[c]);

O resultado após a execução é o seguinte:

Deve-se notar aqui que o uso do localStorage também segue a política de mesma origem, portanto sites diferentes não podem compartilhar diretamente o mesmo localStorage.

O resultado final impresso no console é:

Não sei se algum leitor notou que o que acabou de ser armazenado era do tipo int, mas foi impresso como tipo de string. Isso está relacionado às características do próprio localStorage que só suporta armazenamento do tipo string.

Leitura de localStorage

 if(!window.localStorage){ alert(o navegador suporta armazenamento local); //escreva b campo storage.a=1 ; Escreva o campo c storage.setItem(c,3); console.log(typeof storage[a]); storage[c]); //O primeiro método lê var a=storage.a; console.log(a); o terceiro método lê var c=storage.getItem(c);

Existem três maneiras de ler localStorage. Os métodos oficialmente recomendados são getItem/setItem para acessá-lo. Não me pergunte por quê, porque não sei.

Eu disse antes que localStorage é equivalente a um banco de dados front-end. O banco de dados consiste principalmente em quatro etapas: adição, exclusão e consulta. A leitura e a gravação aqui são equivalentes às duas etapas de adição e consulta.

Agora vamos falar sobre as duas etapas de exclusão e modificação do localStorage.

Alterar esta etapa é mais fácil de entender. A ideia é a mesma que alterar o valor de uma variável global. Aqui usaremos um exemplo para explicá-la brevemente.

 if(!window.localStorage){ alert(o navegador suporta armazenamento local); //Escreve b campo storage.b=1 ; Escreva o campo c storage.setItem(c,3); console.log(storage.a); storage[b]); // console.log(typeof storage[c]);

No console, podemos ver que a chave a foi alterada para 4.

Exclusão de localStorage

1. Limpe todo o conteúdo do localStorage

 var storage=window.localStorage; storage.a=1; storage.setItem(c,3);

2. Exclua um par chave-valor em localStorage

 var storage=window.localStorage; storage.a=1; storage.setItem(c,3);

Ver resultados no console

Aquisição de chave localStorage

 var storage=window.localStorage; storage.a=1; storage.setItem(c,3); registro(chave);

Use o método key() para obter a chave correspondente entrando e saindo do índice.

4. Outras considerações para localStorage

Geralmente armazenaremos JSON em localStorage, mas localStorage converterá automaticamente localStorage em formato de string.

Neste momento podemos usar o método JSON.stringify() para converter JSON em uma string JSON

Exemplo:

 if(!window.localStorage){ alerta(o navegador suporta armazenamento local);else{ var storage=window.localStorage; =JSON.stringify(dados);armazenamento.setItem(dados,d);

Após a leitura, para converter a string JSON em um objeto JSON, use o método JSON.parse()

 var storage=window.localStorage; var data={ nome:'xiecanyong', sexo:'homem', hobby:'programa' }; /Converter string JSON em saída de objeto JSON var json=storage.getItem(data); var jsonObj=JSON.parse(json); jsonObj);

Impresso é um objeto Object

Outra coisa a observar é que outros tipos devem ser convertidos quando forem lidos.