Veamos cómo trabajar con el localstorage efectuando algunas tareas:
- Comprobar su disponibilidad en el navegador
- Guardando datos
- Guardando objetos JSON
- Recuperando objetos JSON
- Borrando un dato
- Borrando todos los datos del localstorage
Enlace:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Localstorage</title>
</head>
<body>
<div id="peliculas"></div>
<div id="registrados"></div>
<script type="text/javascript" src="script.js"></script>
</body>
</html> JavaScript
'use strict'
// Localstorage
// Comprobar disponibilidad del localstorage
if(typeof(Storage) !== 'undefined'){
console.log("Localstorage disponible");
} else {
console.log("Incompatible con Localstorage")
}
// Guardar datos
localStorage.setItem("titulo","Agente 007");
// Recuperar elemento
console.log(localStorage.getItem('titulo'));
document.querySelector("#peliculas").innerHTML = localStorage.getItem('titulo');
// Guardar objeto JSON
var usuario = {
nombre: "Magnito",
email: "magnito@magnito.com",
web: "www.magnito.com"
};
localStorage.setItem("usuario", JSON.stringify(usuario));
// Recuperar objeto
var userjs = JSON.parse(localStorage.getItem("usuario"));
console.log(userjs);
document.querySelector("#registrados").append(" "+userjs.web+" "+userjs.nombre);
// Borrar el Localstorage
localStorage.removeItem("usuario"); //borra solo un item
localStorage.clear(); //borra todos los item del localstorage
No hay comentarios:
Publicar un comentario