Explicação detalhada dos métodos de armazenamento HTML5 sessionStorage e LocalStorage

Comentário: O armazenamento da Web no HTML5 inclui dois métodos de armazenamento: SessionStorage e LocalStorage. O SessionStorage é usado para armazenar dados em uma sessão localmente, que só pode ser acessada nas páginas na mesma sessão e os dados serão destruídos após o término da sessão.

1. A diferença entre armazenamento da web e cookies

O conceito de armazenamento na Web é semelhante aos cookies, a diferença é que ele foi projetado para armazenamento de maior capacidade. O tamanho do cookie é limitado e, toda vez que você solicitar uma nova página, o cookie será enviado, que invisivelmente o desperdício de largura de banda. Além disso, o cookie precisa ser especificado no escopo e não pode ser chamado de domínios.

Além disso, o armazenamento da web possui setItem, getItem, removetem, me métodos claros e outros. Ao contrário dos cookies, os desenvolvedores de front-end precisam encapsular o SetCookies e o GetCookies.

Mas os cookies também são indispensáveis: a função dos cookies é interagir com o servidor e existe como parte da especificação HTTP, enquanto o armazenamento da web é criado apenas para armazenar dados localmente (correção de @otakustay)

2. O status de suporte do navegador do HTML5 Web Storage

Exceto pelo IE7 e abaixo, outros navegadores padrão o suportam totalmente (o IE e o FF precisam ser executados no servidor da Web). Vale ressaltar que o IE sempre faz coisas boas. Por exemplo, o UserData no IE7 e o IE6 são na verdade uma solução para o armazenamento local do JavaScript. Através do encapsulamento de código simples, ele pode ser unificado a todos os navegadores que oferecem suporte ao armazenamento da Web.

Para determinar se o navegador suporta LocalStorage, você pode usar o seguinte código:

Alerta ("Browse Support LocalStorage")

}

outro

{

Alerta ("Navegação não suporta LocalSorage")

}

// ou if (typeof window.localStorage == 'Undefined') {alert ("A navegação não suporta LocalStorage")}

3. Operações LocalStorage e SessionStorage

LocalStorage e SessionStorage têm os mesmos métodos de operação, como setItem, getItem e removetem, etc.

Métodos de LocalStorage e SessionStorage:

Valor de armazenamento setItem

Objetivo: Valor da loja no campo chave

Uso: .setItem (chave, valor)

Exemplo de código:

LocalStorage.SetItem ("Site", "JS8.in");

getItem Get Value

Objetivo: Obtenha o valor armazenado localmente na chave especificada

Uso: .getItem (chave)

Exemplo de código:

var site = localStorage.getItem ("site");

Remova a chave de exclusão

Objetivo: Exclua o valor armazenado localmente na chave especificada

Uso: .removeItem (chave)

Exemplo de código:

LocalStorage.removeItem ("Site");

limpar limpo toda a chave/valor

Objetivo: limpe toda a chave/valores

Uso: .clear ()

Exemplo de código:

LocalStorage.clear ();

4. Outros métodos operacionais: operação de ponto e []

O armazenamento da web pode não apenas usar seu próprio conjunto, getItem etc. para facilitar o acesso, mas também usar o método do Operador e [] [] [] para armazenar dados como objetos comuns, como o seguinte código:

var storage = window.localStorage; armazenamento.Key1 = "Hello";

armazenamento ["key2"] = "mundo";

console.log (armazenamento.key1);

console.log (armazenamento ["key2"]);

5. As propriedades de chave e comprimento do LocalStorage e SessionStorage são implementadas para atravessar

Key () e comprimento fornecido por sessionStorage e LocalStorage podem implementar facilmente a travessia de dados armazenados, como o seguinte código:

var storage = window.localStorage;

for (var i = 0, len = storage.length; i <len; i ++)

{

var key = storage.key (i);

var value = armazenamento.getItem (chave);

console.log (chave + "=" + valor);

}

6. Eventos de armazenamento

O armazenamento também fornece eventos de armazenamento. Quando o valor da chave muda ou claro, o evento de armazenamento pode ser acionado. Por exemplo, o código a seguir adiciona uma escuta para alterações no evento de armazenamento:

window.adDeventListener ("armazenamento", handle_storage, false);

}

caso contrário, se (window.attachevent)

{

window.attachevent ("OnStorage", handle_storage);

}

função handle_storage (e) {

if (! e) {e = window.event;}

}

As propriedades específicas do objeto de evento de armazenamento são as seguintes:

PropertyTypeDescription

tecla a chave nomeada que foi adicionada, removida ou modificada

OldValueany O valor anterior (agora substituído), ou nulo se um novo item foi adicionado

newvalueany o novo valor, ou nulo se um item foi adicionado

URL/Uristring a página que chamou o método que desencadeou essa mudança