Tutorial sobre o uso do LocalStorage no HTML5

Este artigo apresenta principalmente o tutorial sobre o uso do LocalStorage no HTML5. O LocalStorage é usado para interação local de saída entre navegador e sistema. Amigos que precisam

Alguns dias atrás, descobri que havia uma estranha operação de cookies em um projeto antigo. Após a consulta, eu queria armazenar em cache algumas informações para evitar a passagem de parâmetros no URL, mas não considerei quais problemas os cookies trariam:

① O tamanho do cookie é limitado a cerca de 4K, o que não é adequado para armazenar dados comerciais.

② Os cookies são enviados com transações HTTP a cada vez, desperdiçando largura de banda

Estamos realizando projetos móveis, portanto, a tecnologia real adequada para uso aqui é o LocalStorage. Diz -se que o LocalStorage é uma otimização de cookies. Usá -lo pode facilitar o armazenamento de dados do lado do cliente e não será transmitido com HTTP, mas não é sem problemas:

① O tamanho do armazenamento local é limitado a cerca de 5 milhões de caracteres, e cada navegador é inconsistente

② LocalStorage não é legível no modo de privacidade

③ O LocalStorage está essencialmente lendo e escrevendo arquivos. Se houver muitos dados, ficará mais preso (o Firefox importará dados para a memória ao mesmo tempo, e será assustador se você pensar sobre isso)

④ O localStorage não pode ser rastreado por rastreadores, não o use para substituir completamente os parâmetros da URL

As falhas não ocultam os méritos e todos os problemas acima podem ser evitados; portanto, nosso foco deve estar em como usar o LocalSorage e como usá -los corretamente.

Uso de LocalStorage

Existem dois tipos de objetos de armazenamento local:

① Sessionstrage: Sessão significa sessão. Aqui a sessão refere -se ao período de validade do objeto de sessão, é tão longo quando um usuário navega em um determinado site.

② LocalStorage: salve os dados no dispositivo de hardware do cliente, não importa o que seja, significa que os dados ainda estarão lá da próxima vez que você abrir o computador.

A diferença entre os dois é que um é a preservação temporária e o outro é a preservação a longo prazo.

Aqui está um código simples para ilustrar seu uso básico: