Comentario: Este artículo presenta principalmente el uso básico de LocalStorage, SessionStorage, operaciones transversales, manejo de excepciones, etc. para el almacenamiento local HTML5. Los amigos que lo necesitan pueden referirse a él.
La API de almacenamiento local de LocalStorage en HTML5 es la misma que SessionStorage, la diferencia es que SessionStorage se borra después de cerrar la página, mientras que LocalStorage se guardará todo el tiempo. Tomemos LocalStorage como un ejemplo aquí para introducir brevemente el almacenamiento local de HTML5 y dar algunos ejemplos de problemas comunes como el recorrido. LocalStorage es una API almacenada localmente HTML5. Utiliza pares de valor clave para acceder a los datos, y los datos al que se accede solo pueden ser una cadena. Diferentes navegadores tienen un soporte diferente para esta API, como el método de uso, el espacio máximo de almacenamiento, etc.
1. Métodos de uso básicos de la API de LocalStorage
La API de LocalStorage es fácil de entender. Las siguientes son operaciones y ejemplos de API comunes: Establecer datos: localstorage.setItem (clave, valor); Ejemplo:
para (var i = 0; i <10; i ++) {
localStorage.SetItem (i, i);
}
Obtener datos: localstorage.getItem (clave) Obtenga todos los datos: localstorage.valueof () Ejemplo:
localStorage.getItem (i);
}
Eliminar datos: localstorage.removeItem (clave) Ejemplo:
localstorage.removeItem (i);
}
Borre todos los datos: LocalStorage.Clear () Obtenga el número de datos almacenados locales: LocalStorage.length Obtenga el valor clave de los enésimo datos: LocalStorage.Key (N)
2. Iterer sobre el método de valor clave de clave clave
para (var i = localstorage.length-1; i> = 0; i-) {
console.log ('' + (i + 1) + 'El valor clave de los datos es:' + localstorage.key (i) + ', y los datos son:' + localstorage.getitem (localstorage.key (i)));
}
3. Prueba de límite de tamaño de almacenamiento y manejo de excepciones
3.1 Prueba de límite de tamaño de almacenamiento de datos
Los diferentes navegadores básicamente tienen restricciones en el tamaño de almacenamiento local de HTML5. Los resultados de una prueba son los siguientes:
Firefox 22.0> 5242875 + 5 = 5242880
Chrome 28.0> 2621435 + 5 = 2621440
Safari 5.1> 2621435 + 5 = 2621440
Opera 12.15> 5m (si lo supera, un cuadro de diálogo que permite que aparezcan más espacio)
Referencia del código de prueba:
<! Doctype html>
<html>
<Evista>
<script>
Función log (msg) {
console.log (msg);
alerta (msg);
} </p> <p> Var límite;
var mitad = '1'; // Esto se cambiará a chino y volverá a correr
var str = mitad;
var strtr;
mientras (1) {
intentar {
LocalStorage.Clear ();
str += mitad;
localStorage.SetItem ('caché', str);
mitad = str;
} catch (ex) {
romper;
}
}
var base = str.length;
var apagado = base / 2;
var isleft = 1;
while (off) {
if (isleft) {
end = base - (apagado / 2);
} demás {
end = base + (apagado / 2);
} </p> <p> sstr = str.slice (0, end);
LocalStorage.Clear ();
intentar {
localStorage.SetItem ('caché', str);
límite = strtr.length;
isleft = 0;
} catch (e) {
isleft = 1;
} </p> <p> base = end;
apagado = math.floor (apagado / 2);
} </p> <p> log ('Limit:' + Limit);
</script>
</html>
3.2 Manejo de excepciones de almacenamiento de datos
intentar{
localStorage.SetItem (clave, valor);
} Catch (oException) {
if (oexception.name == 'cuotaExceedError') {
console.log ('¡Límite de almacenamiento local excedido!');
// Si la información histórica no es importante, puede limpiarla y luego configurarla
LocalStorage.Clear ();
localStorage.SetItem (clave, valor);
}
}