Almacenamiento local y almacenamiento de sesiones | API de almacenamiento web

SessionStorage y LocalStorage se conocen como la API de almacenamiento web. Los datos se pueden almacenar en el lado del cliente mediante el uso de estas API. 

Almacenamiento de sesión:

• SessionStorage se utiliza para almacenar datos en el lado del cliente.
• El límite máximo de almacenamiento de datos en SessionStorage es de unos 5 MB.
• Los datos en el SessionStorage existen hasta que la pestaña actual está abierta si cerramos la pestaña actual, nuestros datos también se borrarán automáticamente del SessionStorage.

Nota: Si después de cerrar la pestaña actual presionamos ctrl+shift+T para restaurar esa pestaña, entonces, idealmente, los datos de SessionStorage no deberían estar allí, pero podemos ver que SessionStorage se mantiene en Chrome, Firefox pero no en el navegador Safari durante la restauración. la tabla. Es la función dependiente del navegador al restaurar la pestaña. 

Almacenamiento local:

• Al igual que SessionStorage, LocalStorage también se utiliza para almacenar datos en el lado del cliente.
• El límite máximo de ahorro de datos es de unos 5 MB también en LocalStorage.
• LocalStorage no tiene tiempo de caducidad, los datos en LocalStorage persisten hasta que el usuario los elimine manualmente. Esta es la única diferencia entre LocalStorage y SessionStorage

A continuación se presentan algunos detalles sobre SessionStorage y LocalStorage:

• Ambos son de tipo Objeto :
• Formato de almacenamiento de datos en SessionStorage y LocalStorage: los datos deben almacenarse en un par clave-valor en SessionStorage y LocalStorage y la clave-valor debe ser un número o una string

  

Aquí se puede ver que hasta que insertamos datos en forma de string o número, ¡podemos obtener los datos correctamente! En el penúltimo intento, vamos a insertar un objeto simple en key geek y cuando obtengamos ese elemento, devolverá [objeto, objeto]

LocalStorage.setItem("geek", {
"key":"value"
})
undefined
LocalStorage.getItem("geek")
"[object Object]"

Si queremos almacenar un objeto u otra cosa que no sea una string/número, entonces debe ser en forma de string, que es lo que hemos hecho en el último intento.

LocalStorage.setItem("geeks", JSON.stringify({
"key":"value"
}))
undefined
LocalStorage.getItem("geeks")
"{"key":"value"}"

En este intento, usamos el método JSON.stringify() para convertir un objeto en una string.

Métodos comunes en LocalStorage y SessionStorage:

• Para almacenar datos en el almacenamiento web:

LocalStorage.setItem("key", "value");  //key and value both should be string or number;
SessionStorage.setItem("key", "value");  //key and value both should be string or number;

• Para obtener datos del almacenamiento web:

LocalStorage.getItem("key");
SessionStorage.getItem("key");

Here we will pass the key and it will return value.

• Para obtener la longitud del objeto de almacenamiento web:

LocalStorage.length; 
SessionStorage.length;

• Para eliminar un par clave-valor en particular:

LocalStorage.removeItem("key");
SessionStorage.removeItem("key");

when we pass key in method,
it will erase the complete data related to that key.

• Para borrar el almacenamiento completo:

LocalStorage.clear();
SessionStorage.clear();

• Para obtener el nombre clave n del almacenamiento web, pasaremos el número n:

LocalStorage.key(n);
SessionStorage.key(n);

Nota:

1. La seguridad del almacenamiento web es una gran preocupación. Se recomienda encarecidamente que nunca almacene información confidencial en el almacenamiento web, ya que siempre almacena los datos en formato de texto sin formato, y cualquiera puede robar los datos fácilmente. así que nunca almacene la contraseña o las credenciales de pago con el almacenamiento web.
2. El almacenamiento web solo puede almacenar los datos en el lado del cliente, solo el lado del cliente o nuestro javascript pueden jugar con esos datos. Para guardar datos en el lado del servidor, las cookies son la mejor opción.

Almacenamiento de valores que no son de string con JSON:

localStrorage puede usar solo los valores de string y si queremos almacenar objetos o arrays como valores en localStorage , podemos usar JSON.stringify() para convertirlos en la string.

Cuando creamos o actualizamos pares clave/valor en localStorage  , podemos usar JSON.stringify() con el objeto o la array como argumento:

let gfgObj = { name: 'GeeksForGeeks', Score: '100' };
localStorage.setItem(key, JSON.stringify(gfgObj));//Here Object is store as the String

Aunque gfgObj es un objeto, JSON.stringify(gfgObj) se convierte en una string. Entonces gfgObj ahora es un valor localStorage válido.

Para leer y devolver valores Stringified , use el método JSON.parse() . El método JSON.parse() toma strings JSON y las convierte en objetos JavaScript. JSON.parse() toma .getItem() como argumento:

let item = JSON.parse(localStorage.getItem(key));

Esto también es lo mismo para sessionStorage .