Guía HTML5 - 5. Use el almacenamiento web para almacenar los datos de los pares de valor clave

Autor：Eve Cole Fecha de actualización：2025-04-11 13:00:04

El contenido de esta lección es introducir el almacenamiento web, que lo utiliza para almacenar los datos de pares de valor clave en el navegador. Es funcionalmente como las cookies anteriores, pero es mejor y los datos almacenados pueden ser más grandes. Hay dos tipos de almacenamiento web: almacenamiento local y almacenamiento de sesión, que utilizan el mismo mecanismo de implementación, excepto que la visibilidad y el ciclo de vida son diferentes.

1. Use el almacenamiento local

Utilizamos el objeto LocalStorage para acceder al almacenamiento local, que devuelve el objeto de almacenamiento, que se utiliza para almacenar los datos de los pares de valor clave. Tiene las siguientes propiedades y métodos:

Clear (): almacene claramente los datos del par de valor clave;

getItem (<Key>): Obtener valor a través de la clave;

clave (<dexic>): obtenga el valor de la clave a través del índice;

Longitud: devuelve el número de pares de valor clave;

removerItem (<Key>): elimine los datos especificados a través de la tecla;

SetItem (<Key>, <valor>): agregue un par de valores clave. Cuando existe el par de valor clave de la clave especificada, se implementa la operación de actualización;

[<Key>]: Use la tecla para obtener el valor especificado a través del subíndice de matriz.

El objeto de almacenamiento nos permite almacenar datos de pares de valor clave en forma de cadenas. La clave es única, lo que significa que cuando usamos el método SetItem para agregar pares de valor clave, si el valor de la clave ya existe, se implementará la operación de actualización. Veamos el siguiente ejemplo:

<! Doctype html>

<html>

<title> Ejemplo </title>

cuerpo> *{float: izquierda;}

tabla {border-colapso: colapso; margen-izquierda: 50px;}

th, td {relleno: 4px;}

th {text-align: right;}

entrada {borde: negro delgado negro; relleno: 2px;}

etiqueta {min-width: 50px; display: inline-block; text-align: right;}

#Countmsg, #Buttons {margin-izquierda: 50px; margin-top: 5px; margen-bottom: 5px;}

</style>

</ablo>

<Body>

<div>

<div>

<label> valor: </etiqueta> <input id = "value" placeHolder = "Ingrese value"/> </div>

<Button id = "Agregar"> Agregar </botón>

<botón id = "clare"> clare </boton>

</div>

<p id = "countsg"> Hay <span id = "count"> </span> elementos </p>

</div>

<tr>

<th> Recuento de elementos: </th>

</tr>

</table>

displayData ();

botones var = document.getElementsBytagName ('Button');

para (var i = 0; i <button.length; i ++) {

Botones [i] .Onclick = HANGUTTONPRESS;

}

Funcion HangeButtonPress (e) {

Switch (e.target.id) {

Caso 'Agregar':

var key = document.getElementById ('Key'). Value;

value var = document.getElementById ('valor'). valor;

localStorage.SetItem (clave, valor);

romper;

caso 'claro':

LocalStorage.Clear ();

romper;

}

displayData ();

}

función displayData () {

var tableElement = document.getElementById ('data');

tableElement.innerhtml = '';

var itemCount = localStorage.length;

document.getElementById ('Count'). InnerHtml = itemCount;

para (var i = 0; i <itemCount; i ++) {

var key = localStorage.Key (i);

var val = localStorage.getItem (clave);

tableElement.innerHtml + = '<tr> <th>' + key + ': </th> <td>' + val + '</td> </tr>';

}

</script>

</body>

</html>

Veamos los resultados de la ejecución :

El navegador no puede eliminar los datos que creamos a través de LocalStorage a menos que el usuario lo elimine.

2. Escuche eventos de almacenamiento

Los datos almacenados a través del almacenamiento local son visibles para el documento del mismo origen. Por ejemplo, si abre dos navegadores Chrome para acceder a la misma dirección de URL, el almacenamiento local creado en cualquier página también es visible para la otra página. Sin embargo, si abre la misma dirección de URL con otro navegador (como Firefox), el almacenamiento local es invisible porque tienen diferentes fuentes. El evento de almacenamiento se utiliza para escuchar los cambios en el contenido de almacenamiento. Veamos qué propiedades contiene:

Clave: Devuelve el valor de clave cambiado;

OldValue: devuelve el valor antes del cambio del valor clave;

NewValue: Devuelve el valor de nuevo valor cuyo valor clave ha cambiado;

URL: la dirección de URL que ha cambiado;

Storagearea: Devuelve el objeto de almacenamiento cambiado (almacenamiento local o almacenamiento de sesión).

Veamos un ejemplo a continuación:

<! Doctype html>

<html>

<title> Storage </title>

tabla {border-colapso: colapso;}

th, td {relleno: 4px;}

</style>

</ablo>

<Body>

<tr>

<th> OldValue </th>

<th> NewValue </th>

<th> storagearea </th>

</tr>

</table>

var tableElement = document.getElementById ('data');

window.onstorage = function (e) {

var fila = '<tr>';

fila + = '<td>' + e.key + '</td>';

fila + = '<td>' + e.olevalue + '</td>';

fila + = '<td>' + e.newvalue + '</td>';

fila + = '<td>' + e.url + '</td>';

fila + = '<td>' + (e.storagearea == LocalStorage) + '</td> </tr>';

tableElement.innerhtml += row;

}

</script>

</body>

</html>

En el Ejemplo 1, agregamos, eliminamos y modificamos los datos de almacenamiento, y se mostraremos en la página Ejemplo 2. El ejemplo 2 funciona normalmente en el navegador Chrome, Firefox no responde y otros navegadores no lo prueban.

Resultados de ejecución :

3. Use el almacenamiento de la sesión

El almacenamiento de la sesión es el mismo que el almacenamiento local en uso, excepto que su accesibilidad se limita a la página actual, y desaparecerá después de que se cierre la página. Accedemos a él a través de SessionStorage.

<! Doctype html>

<html>

<title> Ejemplo </title>

cuerpo> *{float: izquierda;}

tabla {border-colapso: colapso; margen-izquierda: 50px;}

th, td {relleno: 4px;}

th {text-align: right;}

entrada {borde: negro delgado negro; relleno: 2px;}

etiqueta {min-width: 50px; display: inline-block; text-align: right;}

#Countmsg, #Buttons {margin-izquierda: 50px; margin-top: 5px; margen-bottom: 5px;}

</style>

</ablo>

<Body>

<div>

<div>

<label> valor: </etiqueta> <input id = "value" placeHolder = "Ingrese value"/> </div>

<Button id = "Agregar"> Agregar </botón>

<botón id = "clare"> clare </boton>

</div>

<p id = "countsg"> Hay <span id = "count"> </span> elementos </p>

</div>

<tr>

<th> Recuento de elementos: </th>

</tr>

</table>

displayData ();

Botones var = document.getElementsBytagName ("botón");

para (var i = 0; i <button.length; i ++) {

Botones [i] .Onclick = HANGUTTONPRESS;

}

Funcion HangeButtonPress (e) {

Switch (e.target.id) {

Caso 'Agregar':

var key = document.getElementById ("Key"). Valor;

value var = document.getElementById ("valor"). valor;

sessionStorage.SetItem (clave, valor);

romper;

caso 'claro':

sessionStorage.Clear ();

romper;

}

displayData ();

}

función displayData () {

var tableElement = document.getElementById ('data');

tableElement.innerhtml = '';

var itemCount = sessionStorage.length;

document.getElementById ('Count'). InnerHtml = itemCount;

para (var i = 0; i <itemCount; i ++) {

var key = sessionStorage.Key (i);

var val = sessionStorage.getItem (clave);

tableElement.innerHtml + = "<tr> <th>" + Key + ": </th> <td>" + val + "</td> </tr>";

}

</script>

</body>

</html>

Efecto de ejecución :

Si realiza algún cambio en el Ejemplo 3, la página en el Ejemplo 2 no cambiará.

Resumir :

SessionStorage se utiliza para almacenar datos en una sesión localmente, a la que solo se puede acceder en las páginas en la misma sesión y los datos se destruirán después de finalizar la sesión. Por lo tanto, SessionStorage no es un almacenamiento local persistente, sino solo un almacenamiento a nivel de sesión.

LocalStorage se utiliza para el almacenamiento local persistente, y los datos nunca caducarán a menos que se elimine activamente.

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. Además, cada dominio (incluido el subdominio) del almacenamiento web tiene espacio de almacenamiento independiente, y cada espacio de almacenamiento es completamente independiente, por lo que no causará confusión de datos.

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.

Descarga del código fuente