En este artículo, conocerá los diferentes tipos de almacenamiento web en HTML5. El almacenamiento web es más seguro y se pueden almacenar grandes cantidades de datos localmente en el navegador web del lado del cliente. Todos los datos se almacenan en pares clave-valor.
En HTML5 hay dos tipos de API de almacenamiento web.
- almacenamiento local
- SesiónAlmacenamiento
localStorage: se utiliza para almacenar datos en el lado del cliente. No tiene tiempo de caducidad, por lo que los datos en LocalStorage existen siempre hasta que el usuario los elimina manualmente.
Sintaxis:
- Para almacenar datos en el almacenamiento web: la clave y el valor deben ser una string o un número;
LocalStorage.setItem("key", "value"); - Para obtener datos del almacenamiento web: pasaremos la clave y devolverá el valor.
LocalStorage.getItem("key");
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: green;
text-align: center;
font-size: 30px;
margin-top: 30px;
font-style: italic;
}
#data {
text-align: center;
}
</style>
</head>
<body>
<input id="name" type="name" placeholder="enter your name" />
<button type="submit" onClick="handleClick()">click</button>
<br />
<div id="data"></div>
<script>
function handleClick() {
if (typeof Storage !== "undefined") {
let name = document.getElementById("name").value;
localStorage.setItem("name", name);
document.getElementById("data").innerHTML =
"Welcome To GeeksforGeeks" + " " + localStorage.name;
} else {
alert("Sorry! your browser doesn't support Web Storage");
}
}
</script>
</body>
</html>
Producción:
Datos almacenados en el almacenamiento local:
Podemos ver claramente que los elementos de almacenamiento local se almacenan en forma de par clave/valor y puede verificar inspeccionando los elementos en la página web y luego ir a la opción Aplicación donde encontrará el almacenamiento local.
Como el objeto localStorage almacena los datos sin fecha de vencimiento, puede verificar esto cerrando la pestaña actual y visitando la misma página nuevamente, encontrará que los mismos datos están presentes en localStorage de esa pestaña o ventana.
Almacenamiento de sesión : se utiliza para almacenar datos en el lado del cliente. Los datos en SessionStorage existen hasta que se abre la pestaña actual, si cerramos la pestaña actual, nuestros datos también se borrarán automáticamente de SessionStorage.
Sintaxis:
- Para almacenar datos en el almacenamiento web:
SessionStorage.setItem("key", "value"); - Para obtener datos del almacenamiento web:
SessionStorage.getItem("key");
Ejemplo :
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: green;
text-align: center;
font-size: 30px;
margin-top: 30px;
font-style: italic;
}
#data {
text-align: center;
}
</style>
</head>
<body>
<input id="name" type="name" placeholder="enter your name" >
<button type="submit" onClick="handleClick()">click</button>
<br>
<div id="data"></div>
<script>
function handleClick() {
if(typeof(Storage)!=="undefined") {
let name = document.getElementById("name").value;
sessionStorage.setItem("name", name);
document.getElementById("data").innerHTML =
("Welcome To GeeksforGeeks"+" "+sessionStorage.name);
}
else{
alert("Sorry! your browser is not supporting the browser")
}
}
</script>
</body>
</html>
Producción:
Datos almacenados en Almacenamiento de sesión:
Como el objeto sessionStorage almacena los datos con la fecha de vencimiento, puede verificar esto cerrando la pestaña actual y visitando la misma página nuevamente, encontrará que los datos están vacíos en sessionStorage de esa pestaña o ventana.
Publicación traducida automáticamente
Artículo escrito por aksrathod07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA