Resumen del uso de localStorage y sessionStorage

En HTML5, se agrega una nueva función de almacenamiento local. Esta función se utiliza principalmente como almacenamiento local para resolver el problema del espacio de almacenamiento de cookies insuficiente (el espacio de almacenamiento de cada cookie en la cookie es 4k. El tamaño admitido en el almacenamiento local de los navegadores generales es 5M). Este almacenamiento local será diferente en diferentes navegadores.

1. localStorage amplía el límite de cookies de 4K

2. LocalStorage puede almacenar directamente los primeros datos solicitados localmente. Esto es equivalente a una base de datos de 5 M para la página de inicio. En comparación con las cookies, puede ahorrar ancho de banda, pero esto solo está disponible en navegadores de alta gama.

1. Los navegadores no tienen un tamaño uniforme y el atributo localStorage solo se admite en versiones de IE superiores a IE8.

2. Actualmente, todos los navegadores limitan el tipo de valor de localStorage al tipo de cadena. Esto requiere cierta conversión para nuestros tipos de objetos JSON comunes a diario.

3. localStorage no se puede leer en el modo de privacidad del navegador.

4. LocalStorage esencialmente lee cadenas. Si almacena una gran cantidad de contenido, consumirá espacio de memoria y provocará que la página se bloquee.

5. Los rastreadores no pueden rastrear localStorage

La única diferencia entre localStorage y sessionStorage es que localStorage pertenece al almacenamiento permanente, mientras que sessionStorage pertenece a sessionStorage. Cuando finaliza la sesión, los pares clave-valor en sessionStorage se borrarán.

Aquí usamos localStorage para analizar

Soporte del navegador para almacenamiento local:

Una declaración especial aquí es que si está utilizando el navegador IE, UserData se utilizará como almacenamiento. La explicación principal aquí es el contenido de localStorage, por lo que UserData no se explicará demasiado y, en opinión personal del blogger, no hay nada. Es necesario aprender el uso de UserData, porque el IE6/IE7 actual está en la fase de eliminación, y muchos desarrollos de páginas hoy involucran tecnologías emergentes como HTML5/CSS3, por lo que generalmente no lo usamos por compatibilidad.

Primero, cuando usamos localStorage, debemos determinar si el navegador admite el atributo localStorage.

 if(!window.localStorage){ alert(el navegador admite almacenamiento local return false }else{ // Negocio lógico principal}

Hay tres métodos para escribir en localStorage. Aquí los presentaremos uno por uno.

 if(!window.localStorage){ alert(el navegador admite almacenamiento local); return false; }else{ var Storage=window.localStorage; //Escribe un campo de almacenamiento[a]=1; ; //Escribe el campo c almacenamiento.setItem(c,3); console.log(tipo de almacenamiento[a]); almacenamiento[c]);

El resultado después de ejecutar es el siguiente:

Cabe señalar aquí que el uso de localStorage también sigue la política del mismo origen, por lo que diferentes sitios web no pueden compartir directamente el mismo localStorage.

El resultado final impreso en la consola es:

No sé si algún lector ha notado que lo que se acaba de almacenar era de tipo int, pero se imprimió como tipo de cadena. Esto está relacionado con las características del propio localStorage. LocalStorage solo admite almacenamiento de tipo cadena.

Lectura de almacenamiento local

 if(!window.localStorage){ alert(el navegador admite almacenamiento local); }else{ var Storage=window.localStorage; //Escribe un campo almacenamiento[a]=1 //Escribe b campo almacenamiento.a=1; Escriba el campo c almacenamiento.setItem(c,3); console.log(tipo de almacenamiento[a]); almacenamiento[c]); //El primer método lee var a=storage.a; console.log(a); //El segundo método lee var b=storage[b]; el tercer método lee var c=storage.getItem(c);

Hay tres formas de leer localStorage. Los métodos recomendados oficialmente son getItem/setItem para acceder a él. No me preguntes por qué, porque no lo sé.

He dicho antes que localStorage es equivalente a una base de datos front-end. La base de datos consta principalmente de cuatro pasos: agregar, eliminar y consultar. La lectura y la escritura aquí son equivalentes a los dos pasos de agregar y consultar.

Ahora hablemos de los dos pasos para eliminar y modificar localStorage.

Cambiar este paso es más fácil de entender. La idea es la misma que cambiar el valor de una variable global. Aquí usaremos un ejemplo para explicarlo brevemente.

 if(!window.localStorage){ alert(el navegador admite almacenamiento local); }else{ var Storage=window.localStorage; //Escribe un campo almacenamiento[a]=1 //Escribe b campo almacenamiento.b=1; Escriba el campo c almacenamiento.setItem(c,3); console.log(storage.a); // console.log(typeof almacenamiento[a]); almacenamiento[b]); // console.log(tipo de almacenamiento[c]); /*Línea de separación*/ almacenamiento.a=4;

En la consola podemos ver que la clave a se ha cambiado a 4.

Eliminación de almacenamiento local

1. Borrar todo el contenido de localStorage

 var almacenamiento=ventana.almacenamiento local; almacenamiento.a=1; almacenamiento.setItem(c,3); almacenamiento.clear();

2. Eliminar un par clave-valor en localStorage

 var almacenamiento=ventana.almacenamiento local; almacenamiento.a=1; almacenamiento.setItem(c,3); consola.log(almacenamiento.removeItem(a);

Ver resultados en la consola

adquisición de claves de almacenamiento local

 var almacenamiento=ventana.localStorage; almacenamiento.a=1; almacenamiento.setItem(c,3); for(var i=0;i<almacenamiento.longitud;i++){ var clave=almacenamiento.key(i); iniciar sesión (clave);

Utilice el método key() para obtener la clave correspondiente ingresando y saliendo del índice.

4. Otras consideraciones para el almacenamiento local

Generalmente almacenaremos JSON en localStorage, pero localStorage convertirá automáticamente localStorage en formato de cadena.

En este momento podemos usar el método JSON.stringify() para convertir JSON en una cadena JSON.

Ejemplo:

 if(!window.localStorage){ alerta(el navegador admite almacenamiento local); }else{ var almacenamiento=window.localStorage; var data={ nombre:'xiecanyong', sexo:'hombre', pasatiempo:'programa' }; =JSON.stringify(datos); almacenamiento.setItem(datos,d); consola.log(almacenamiento.datos);

Después de leer, para convertir la cadena JSON en un objeto JSON, use el método JSON.parse()

 var almacenamiento=ventana.localStorage; var datos={ nombre:'xiecanyong', sexo:'hombre', pasatiempo:'programa' }; /Convertir cadena JSON en salida de objeto JSON var json=storage.getItem(data) var jsonObj=JSON.parse(json); jsonObj);

Impreso es un objeto Objeto

Otra cosa a tener en cuenta es que otros tipos deben convertirse cuando se leen.