Tutorial de introducción a HTML5 localStorage

El almacenamiento local de solo lectura le permite acceder al almacenamiento de objetos remoto (origen) de un documento y los datos se almacenan como una sesión entre navegadores. localStorage es similar a sessionStorage, la diferencia es que los datos almacenados en localStorage son indefinidos, mientras que los datos almacenados en sessionStorage se borrarán cuando finalice la sesión de la página, es decir, cuando se cierre la página.

El número de pares clave-valor en localStorage.

 localStorage.length // 0localStorage.setItem('nombre', 'laberinto')localStorage.length // 1

Agregue/actualice pares clave-valor de localStorage.

 localStorage.setItem('nombre', 'mazey')localStorage.setItem('age', '23')localStorage // Almacenamiento {edad: 23, nombre: mazey, longitud: 2}

Equivalente a:

 localStorage.name = 'mazey'localStorage.age = '23'localStorage // Almacenamiento {edad: 23, nombre: mazey, longitud: 2}

Obtiene el valor de la clave especificada en localStorage.

 localStorage.setItem('nombre', 'mazey')localStorage.setItem('edad', '23')localStorage.getItem('nombre') // mazeylocalStorage.getItem('edad') // 23localStorage.getItem('sexo ') // nulo

Equivalente a:

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

Elimina el par clave-valor para la clave especificada de localStorage.

 localStorage.setItem('nombre', 'mazey')localStorage.setItem('edad', '23')localStorage // Almacenamiento {edad: 23, nombre: mazey, longitud: 2}localStorage.removeItem('edad') / / undefinidoalmacenamientolocal // {nombre: laberinto, longitud: 1}localStorage.removeItem('edad') // indefinido

Borre todos los pares clave-valor en localStorage.

 localStorage.setItem('nombre', 'mazey')localStorage.setItem('age', '23')localStorage // Almacenamiento {edad: 23, nombre: mazey, longitud: 2}localStorage.clear()localStorage // Almacenamiento {longitud: 0}

localStorage solo puede almacenar cadenas, por lo que los valores complejos como matrices/objetos deben convertirse en cadenas usando JSON.stringify() primero, y luego usar JSON.parse() para convertirlos en valores complejos antes de usarlos.

 let 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]

Deje que la ventana supervise el almacenamiento de localStorage. Cuando el almacenamiento local de una etiqueta cambia, otras etiquetas responden en consecuencia.

test0.html: cambia el almacenamiento local.

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

test1.html: responde a los cambios de almacenamiento local.

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

1. localStorage solo se puede usar bajo el mismo nombre de dominio y se puede usar con postMessage e iframe para lograr la comunicación entre dominios.
2. Las versiones inferiores de IE no son compatibles con localStorage.
3. Debe usarse en un entorno de servidor, es decir, no se puede usar en entornos anormales como file://.
4. Pueden ocurrir problemas impredecibles en el almacenamiento local móvil (H5, IOS, Android).

Deje de usar el almacenamiento local

Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.