LocalStorage y SessionStorage
Propiedades contenidas en el objeto storage API Javascript window que soportan los navegadores actuales gracias a HTML 5 para guardar información en el lado del cliente.
Con el LocalStorage o HTML5 Web Storage se puede guardar información en nuestro navegador web y que esa información persista y esté disponible durante la navegación entre las diferentes páginas de nuestro sitio o aplicación web.
La diferencia entre Local Storage y Session Storage es que la primera no tiene fecha de espiración y la segunda solo será válida para la ventana actual en la que estamos navegando
Las características de LocalStorage y SessionStorage:
- Permiten almacenar entre 5MB y 10MB de información; incluyendo texto y multimedia.
- La información está almacenada en la computadora del cliente y NO es enviada en cada petición del servidor, a diferencia de las cookies.
- Utilizan un número mínimo de peticiones al servidor para reducir el tráfico de la red.
- Previenen pérdidas de información cuando se desconecta de la red.
- La información es guardada por domino web (incluye todas las páginas del dominio).
HTML5 incluye una API de JavaScript para interactuar con localStorage,
teniendo métodos disponibles para usar:
Almacenar datos en localStorage
//Opción 1 localStorage.setItem(‘name’,’content’)
localStorage.setItem(‘Auto’,’Azul’)
//Opción 2 localStorage.name = content
localStorage.auto = ‘deportivo’
Recuperar datos en localStorage
//Opción 1 localStorage.getItem(name,content)
var variable = localStorage.getItem(‘Auto’),
//Opción 2 localStorage.name
variable = localStorage.auto
Elimina un elemento dentro de localStorage
//localStorage.removeItem(name)
localStorage.removeItem(auto)
Limpia toda la información almacenada en localStorage
localStorage.clear()
SessionStorage almacena información mientras la pestaña donde se esté utilizando siga abierta, una vez cerrada, la información se elimina.
Almacenar datos en sessionStorage
//Opción 1 sessionStorage.setItem(name, content)
sessionStorage.setItem(‘Nombre’, ‘Miguel Antonio’)
//Opción 2 sessionStorage.name = content
sessionStorage.Apellido = ‘Márquez Montoya’
Recuperar datos en sessionStorage
// Opción 1 sessionStorage.getItem(name, content)
let firstName = sessionStorage.getItem(‘Nombre’),
// Opción 2 sessionStorage.name
lastName = sessionStorage.Apellido
Eliminar datos en sessionStorage
// sessionStorage.removeItem(name)
sessionStorage.removeItem(Apellido)
Limpiar todo el Storage
sessionStorage.clear()
Ejemplo:
Index.html
<form>
<div class=”form-row d-flex justify-content-center”>
<div class=”col-4">
<select class=”form-control” id=”select”>
<option>LUIS</option>
<option>JUAN PEDRO</option>
<option>CONCEPCION</option>
<option>ELENEA</option>
<option>GABRIEL</option>
</select>
</div>
<div class=”col-2">
<button type=”button” class=”btn btn-success” id=”guardar”>Guardar</button>
</div>
<div class=”col-2">
<button type=”button” class=”btn btn-warning” id=”local”> localstorage</button>
</div>
</div>
</form>
<script src=”https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity=”sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n” crossorigin=”anonymous”></script>
<script src=”js/functions.js”></script>
functions.js
//Al dar click en el botón ‘guardar ‘ almacenara el valor del select seleccionado en localstorage
$(“#guardar”).click(function(){
localStorage.nombre = $(“#select”).val();
})
/* Al dar click en el botón local storage recupera el valor previamente guardado y podrás utilizarlo indefinidamente y ocupar ese valor en cualquier parte del código o proceso, muy útil para almacenar una cantidad de datos moderada y no recurrir a algo quizá complejo como a una base de datos */
$(“#local”).click(function(){
var nombre= localStorage.nombre;
alert(‘el nombre es:’+nombre);
})
fuentes: https://ed.team/
Comenta y con gusto te responderemos!
¡Lo único imposible es aquello que no intentas :D!
