Explicación detallada de los métodos de almacenamiento HTML5 SessionStorage y LocalStorage

Comentario: El almacenamiento web en HTML5 incluye dos métodos de almacenamiento: SessionStorage y LocalStorage. SessionStorage se utiliza para almacenar datos en una sesión localmente, a la que solo se puede acceder en páginas en la misma sesión y los datos se destruirán después de que termine la sesión.

1. La diferencia entre el almacenamiento web y las cookies

El concepto de almacenamiento web es similar al de las cookies, la diferencia es que está diseñado para un almacenamiento de mayor capacidad. El tamaño de la cookie es limitado, y cada vez que solicite una nueva página, se enviará la cookie, lo que desperdicia invisiblemente el ancho de banda. Además, la cookie debe especificarse alcance y no se puede llamar a través de dominios.

Además, el almacenamiento web tiene SetItem, GetItem, RemoLtItem, Clear y otros métodos. A diferencia de las cookies, los desarrolladores front-end necesitan encapsular a Setcookies y Getcookies.

Pero las cookies también son indispensables: la función de las cookies es interactuar con el servidor y existe como parte de la especificación HTTP, mientras que el almacenamiento web solo se crea para almacenar datos localmente (corrección de @otakustay)

2. El estado de soporte del navegador del almacenamiento web HTML5

A excepción de IE7 y debajo, otros navegadores estándar lo admiten plenamente (es decir, y FF deben ejecutarse en el servidor web). Vale la pena mencionar que IE siempre hace cosas buenas. Por ejemplo, los datos de usuario en IE7 e IE6 son en realidad una solución para el almacenamiento local de JavaScript. A través de la encapsulación de código simple, se puede unificar en todos los navegadores que admiten el almacenamiento web.

Para determinar si el navegador admite LocalStorage, puede usar el siguiente código:

alerta ("Explorar el apoyo local")

}

demás

{

alerta ("La navegación no es compatible con LocalStorage")

}

// o if (typeof window.localStorage == 'Undefined') {alert ("navegar no admite localstorage")}

3. Operaciones de Storage y SessionStorage

LocalStorage y SessionStorage tienen los mismos métodos de operación, como SetItem, GetItem y RemoTiTem, etc.

Métodos de almacenamiento local y sesionstorage:

Valor de almacenamiento de SetItem

Propósito: Valor de la tienda en el campo Clave

Uso: .SetItem (clave, valor)

Ejemplo de código:

localStorage.SetItem ("Sitio", "JS8.in");

GetItem Get Value

Propósito: Obtenga el valor almacenado localmente en la clave especificada

Uso: .getItem (clave)

Ejemplo de código:

var sitio = localStorage.getItem ("Sitio");

key de eliminación de eliminación

Propósito: elimine el valor almacenado localmente en la clave especificada

Uso: .RemoveItem (clave)

Ejemplo de código:

localStorage.removeItem ("Sitio");

Borrar Borrar toda la clave/valor

Propósito: Borre toda la clave/valores

Uso: .clar ()

Ejemplo de código:

LocalStorage.Clear ();

4. Otros métodos operativos: operación puntual y []

El almacenamiento web no solo puede usar su propio setitem, getItem, etc. para facilitar el acceso, sino también usar el operador Dot (.) Y [] método para almacenar datos como objetos ordinarios, como el siguiente código:

Var Storage = Window.LocalStorage; Storage.Key1 = "Hello";

almacenamiento ["key2"] = "mundo";

console.log (Storage.Key1);

console.log (almacenamiento ["key2"]);

5. Las propiedades clave y longitud de LocalStorage y SessionStorage se implementan para atravesar

Key () y la longitud proporcionada por SessionStorage y LocalStorage pueden implementar fácilmente el recorrido de datos almacenados, como el siguiente código:

Var Storage = Window.LocalStorage;

para (var i = 0, len = storage.length; i <len; i ++)

{

var key = storage.key (i);

value var = almacenamiento.getItem (clave);

console.log (clave + "=" + valor);

}

6. Eventos de almacenamiento

El almacenamiento también proporciona eventos de almacenamiento. Cuando el valor clave cambia o bordea, el evento de almacenamiento se puede activar. Por ejemplo, el siguiente código agrega una escucha para los cambios en el evento de almacenamiento:

Window.AdDeventListener ("Storage", Handle_storage, falso);

}

else if (window.attachevent)

{

Window.attachevent ("OnStorage", Handle_Storage);

}

función handle_storage (e) {

if (! e) {e = window.event;}

}

Las propiedades específicas del objeto de evento de almacenamiento son las siguientes:

PropertyTypedescription

Keystring La clave con nombre que se agregó, eliminó o modificó

OldValueAnythe Valor anterior (ahora sobrescrito), o nulo si se agregó un nuevo artículo

newValueAnythe nuevo valor, o nulo si se agregó un artículo

URL/Uristring La página que llamó el método que desencadenó este cambio