Para administrar los datos manejados por su aplicación web, no necesita necesariamente una base de datos. Las funciones de almacenamiento del navegador respectivas son compatibles con Chrome (versión 4 y superior), Mozilla Firefox (versión 3.5 y superior) e Internet Explorer (versión 8 y superior), y una variedad de otros navegadores, incluidos los de iOS y Android.
Hay dos posibilidades principales para el almacenamiento del navegador: localStorage y sessionStorage.
almacenamiento local
Cualquier contenido / datos guardados en el localStorageobjeto estarán disponibles después de que el navegador se haya reiniciado (cerrado y abierto nuevamente). Para guardar un elemento en localStorage, puede utilizar el método setItem(). Este método debe recibir una clave y un valor.
Example: localStorage.setItem("mykey","myvalue");Para recuperar el elemento de localStorage , se getItemdebe utilizar el método . El getItemmétodo debe recibir la clave de los datos que desea recuperar:
Example: localStorage.getItem("mykey");Puede eliminar un elemento de localStoragemediante el removeItem()método. En este método se debe entregar la llave del artículo a retirar:
Example: localStorage.removeItem("mykey");Para borrar todo localStorage, debe usar el clear()método en el localStorageobjeto:
Example: localStorage.clear();sessionStorage
Los elementos guardados en el sessionStorageobjeto permanecerán hasta que el usuario cierre el navegador. Luego, se borrará el almacenamiento.
Puede guardar un elemento en sessionStorage, utilice el método setItem()en el sessionStorageobjeto:
Example: sessionStorage.setItem("mykey","myvalue");Para recuperar el elemento de sessionStorage , se getItemdebe utilizar el método . El getItemmétodo debe recibir la clave de los datos que desea recuperar:
Example: sessionStorage.getItem("mykey");Puede eliminar un elemento de sessionStoragemediante el removeItem()método. En este método se debe entregar la llave del artículo a retirar:
Example: sessionStorage.removeItem("mykey");Para borrar todo sessionStorage, debe usar el clear()método en el sessionStorageobjeto:
Example: sessionStorage.clear();Guardar matrices en localStorage y sessionStorage
No puede simplemente guardar valores individuales en localStoragey sessionStorage, sino que también puede guardar el contenido de una matriz.
En este ejemplo, tenemos una matriz con números:
var ourArray =[1,2,3,4,5];Ahora podemos guardarlo localStorageo sessionStorageusar el setItem()método:
localStorage.setItem("ourarraykey",JSON.stringify(ourArray));o, para sessionStorage:
sessionStorage.setItem("ourarraykey",JSON.stringify(ourArray));Para ser guardado, la matriz debe convertirse primero en una cadena. En el ejemplo que se muestra arriba, estamos usando el JSON.stringifymétodo para lograr esto.
Al recuperar nuestros datos de localStorageo sessionStorage, conviértalos de nuevo en una matriz:
var storedArray = localStorage.getItem("ourarraykey"); ourArray = JSON.parse(storedArray);o, para sessionStorage:
var storedArray = sessionStorage.getItem("ourarraykey"); ourArray = JSON.parse(storedArray);