Que es Web Storage?
Con Web Storage, las aplicaciones web pueden almacenar datos localmente dentro del navegador del usuario.
Antes de HTML5, los datos de la aplicación tenían que almacenarse en cookies, incluidas en cada solicitud del servidor. Web Storage es más seguro y se pueden almacenar grandes cantidades de datos localmente, sin afectar el rendimiento del sitio web.
A diferencia de las cookies, el límite de almacenamiento es mucho mayor (al menos 5 MB) y la información nunca se transfiere al servidor.
Web Storage es por origen (por dominio y protocolo). Todas las páginas, desde un origen, pueden almacenar y acceder a los mismos datos.
Objetos HTML Web Storage
HTML provee dos objetos para almacenamiento de datos en el cliente
- window.localStorage: almacena datos sin fecha de caducidad
- window.sessionStorage: almacena datos para una sesión (los datos se pierden cuando se cierra la pestaña del navegador)
Antes de usar Web Storage, comprueba la compatibilidad del navegador con localStorage y sessionStorage:
if (typeof(Storage) !== "undefined") {
// Code for localStorage/sessionStorage.
} else {
// Sorry! No Web Storage support..
}El objeto localStorage
El objeto localStorage almacena los datos sin fecha de caducidad. Los datos no se eliminarán cuando se cierre el navegador y estarán disponibles al día, semana o año siguiente.
Ejm
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<div id="result"></div>
<script>
// CHECKEAR SI EL NAVEGADOR SOPORTA WEB STORAGE
if(typeof(Storage) !="undefined"){
// ALMACENA
localStorage.setItem("lastname", "Paredes");
// RECUPERA
document.getElementById("result").innerHTML =
localStorage.getItem("lastname");
} else {
document.getElementById("result").innerHTML =
"Lo sentimos, tu navegador no soporta Web Storage"
}
</script>
</body>
</html>Ejm explicado
- Crea un par de nombre/valor de almacenamiento local con nombre=»lastname» y valor=»Paredes»
- Recupera el valor de «apellido» e insértalo en el elemento con id=»result»
El ejemplo anterior también podría escribirse así:
// Store
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;La sintaxis para eliminar el elemento localStorage «lastname» es la siguiente:
localStorage.removeItem("lastname");Nota: Los pares de nombre/valor siempre se almacenan como cadenas. ¡Recuerda convertirlos a otro formato cuando sea necesario!
El siguiente ejemplo cuenta el número de veces que un usuario ha hecho clic en un botón. En este código, la cadena de valor se convierte en un número para poder aumentar el contador.
Ejm
<!DOCTYPE html>
<html lang="es">
<head>
<script>
function clickCounter(){
if(typeof(Storage) !=="undefined"){
if(localStorage.clickcount){
localStorage.clickcount = Number(localStorage.clickcount)+1;
}else{
localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "Has hecho clic en el botón "
+ localStorage.clickcount + " vez (veces)";
}else{
document.getElementById("result").innerHTML = "Lo sentimos, tu navegador no soporta localStorage";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Haz clic</button></p>
<div id="result"></div>
<p>Haz clic en el botón para incrementar el contador</p>
<p>Cierra la ventana y prueba otra vez, y el contador seguirá contando
(si no se resetea)</p>
</body>
</html>El objeto sessionStorage
El objeto sessionStorage es igual al objeto localStorage, excepto que almacena los datos de una sola sesión. Los datos se eliminan cuando el usuario cierra la pestaña específica del navegador.
El siguiente ejemplo cuenta la cantidad de veces que un usuario ha hecho clic en un botón en la sesión actual.
Ejm
<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter() {
if (typeof(Storage) !== "undefined") {
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
} else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button "
+ sessionStorage.clickcount + " time(s) in this session.";
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Click me!</button></p>
<div id="result"></div>
<p>Click the button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and the counter is reset.</p>
</body>
</html>