Tutorial de primeiros passos do Html5 localStorage

LocalStorage somente leitura permite que você acesse o armazenamento remoto (origem) de um objeto, os dados são armazenados como uma sessão entre navegadores. localStorage é semelhante ao sessionStorage, a diferença é que os dados armazenados em localStorage são indefinidos, enquanto os dados armazenados em sessionStorage serão apagados quando a sessão da página terminar - ou seja, quando a página for fechada.

O número de pares de valores-chave em localStorage.

 localStorage.length // 0localStorage.setItem('nome', 'mazey')localStorage.length // 1

Adicionar/atualizar pares de valores-chave localStorage.

 localStorage.setItem('name', 'mazey')localStorage.setItem('age', '23')localStorage // Armazenamento {idade: 23, nome: mazey, comprimento: 2}

Equivalente a:

 localStorage.name = 'mazey'localStorage.age = '23'localStorage // Armazenamento {idade: 23, nome: mazey, comprimento: 2}

Obtém o valor da chave especificada em localStorage.

 localStorage.setItem('nome', 'mazey')localStorage.setItem('idade', '23')localStorage.getItem('nome') // mazeylocalStorage.getItem('idade') // 23localStorage.getItem('sexo ') // nulo

Equivalente a:

 localStorage.setItem('name', 'mazey')localStorage.setItem('age', '23')localStorage.name // mazeylocalStorage['age'] // 23localStorage.sex // indefinido

Remove o par chave-valor da chave especificada do localStorage.

 localStorage.setItem('name', 'mazey')localStorage.setItem('age', '23')localStorage // Armazenamento {idade: 23, nome: mazey, comprimento: 2}localStorage.removeItem('age') / / undefinedlocalStorage // {nome: mazey, comprimento: 1}localStorage.removeItem('age') // indefinido

Limpe todos os pares de valores-chave em localStorage.

 localStorage.setItem('name', 'mazey')localStorage.setItem('age', '23')localStorage // Armazenamento {idade: 23, nome: mazey, comprimento: 2}localStorage.clear()localStorage // Armazenamento {comprimento: 0}

localStorage só pode armazenar strings, portanto, valores complexos, como arrays/objetos, devem ser convertidos em strings usando JSON.stringify() primeiro e, em seguida, usar JSON.parse() para convertê-los em valores complexos antes de usar.

 deixe arr = [1, 2, 3]localStorage.setItem('arr', arr)localStorage.getItem('arr') // 1,2,3// JSON.stringify()localStorage.setItem('arr', JSON.stringify(arr))localStorage.getItem('arr') // [1,2,3]JSON.parse(localStorage.getItem('arr')) ​​​​// [1, 2, 3]

Deixe a janela monitorar o armazenamento de localStorage. Quando o localStorage de um rótulo muda, outros rótulos respondem de acordo.

test0.html - Altere o armazenamento local.

 <input type=text id=input /><button onclick=setNameForStorage()>Set</button><script type=text/javascript> function setNameForStorage () { localStorage.name = document.querySelector('#input'). valor }</script>

test1.html - responde às alterações do localStorage.

 <script type=text/javascript> window.addEventListener('storage', e => { console.log(e.key, e.newValue) // nome 123 })</script>

1. localStorage só pode ser usado sob o mesmo nome de domínio e pode ser usado com postMessage e iframe para obter comunicação entre domínios.
2. Versões inferiores do IE não suportam localStorage.
3. Ele precisa ser utilizado em ambiente de servidor, ou seja, não pode ser utilizado em ambientes anormais como arquivo://.
4. Problemas imprevisíveis podem ocorrer no localStorage móvel (H5, IOS, Android).

Pare de usar armazenamento local

O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.