El almacenamiento del lado del servidor almacena datos en el servidor (es decir, una base de datos externa) y el almacenamiento del lado del cliente permite al usuario almacenar datos en el cliente (es decir, el navegador del usuario).
El almacenamiento del lado del cliente consta de API de JavaScript que le permiten almacenar datos en el cliente, es decir, en la máquina del usuario, y luego recuperarlos cuando sea necesario. Esto tiene muchos usos diferentes, tales como:
- Personalizar las preferencias del sitio (por ejemplo: mostrar la elección de un usuario de widgets personalizados, combinación de colores o tamaño de fuente).
- Persistir en la actividad anterior del sitio (por ejemplo: almacenar el contenido de un carrito de compras de una sesión anterior y recordar si un usuario inició sesión previamente).
- Guardar documentos generados por aplicaciones web localmente para uso sin conexión.
- Guardar datos y activos localmente para que los usuarios puedan descargarlos de forma más rápida y menos costosa o, a veces, usarlos sin una conexión de red.
El almacenamiento web y las cookies son dos formas de almacenar los datos en el navegador del cliente. Se explican a continuación:
Almacenamiento web: con la ayuda del almacenamiento web, las aplicaciones web pueden almacenar datos localmente dentro del navegador del usuario. Durante cada solicitud del servidor, los datos se almacenan en forma de cookies.
ventajas:
- El almacenamiento web es más seguro y se pueden almacenar localmente grandes cantidades de datos sin afectar el rendimiento del sitio web.
- El límite de almacenamiento es mayor (al menos 5 MB) y la información nunca se transfiere al servidor.
- Las páginas del mismo origen acceden a los mismos datos.
La primera versión del navegador es totalmente compatible con el almacenamiento web a continuación:
- cromo: 4.0
- Firefox: 3.5
- Safari: 4.0
- Ópera: 11,5
- Internet Explorer/Borde: 8.0
Objetos de almacenamiento web HTML: el almacenamiento web HTML tiene dos objetos para almacenar datos en el cliente:
- window.localStorage: No hay fecha de caducidad para los datos almacenados.
- window.sessionStorage: almacena datos para una sesión (los datos se pierden cuando se cierra la pestaña del navegador)
Primero verifique la compatibilidad del navegador con localStorage y sessionStorage:
Javascript
if (typeof (Storage) !== "undefined") {
// This is Code for localStorage/sessionStorage.
} else {
// No Web Storage support is there
}
El objeto localStorage: el objeto localStorage almacena los datos sin fecha de caducidad. Los datos no se eliminan incluso cuando se cierra el navegador.
El objeto sessionStorage: almacena los datos de una sola sesión. Los datos se eliminan cada vez que el usuario cierra la pestaña específica del navegador.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<body>
<div id="result"></div>
<script>
if (typeof (Storage) !== "undefined") {
localStorage.setItem("name", "Geek");
document.getElementById("result").innerHTML =
localStorage.getItem("name");
} else {
document.getElementById("result").innerHTML =
"your browser does not support Web Storage...";
}
</script>
</body>
</html>
Producción:
Geek
Cookies en HTML: Las cookies son los datos almacenados en pequeños archivos de texto en el ordenador. Se inventaron para recordar la información del usuario. Porque cuando un servidor web envía los datos al navegador y si por algún factor externo se apaga, el servidor se olvida de todo sobre el usuario.
Cuando un usuario visita una página web sus datos se almacenan en forma de cookie. Si el mismo usuario vuelve a visitar la página web, la página web recuerda al usuario y proporciona fuentes relacionadas con los elementos buscados anteriormente. Estas cookies se intercambian entre navegadores web y servidores web. Las cookies se guardan en pares nombre-valor como:
username = geek
La etiqueta <meta> se puede usar para almacenar las cookies en el lado del cliente.
Ejemplo: En el ejemplo a continuación, el valor ingresado en el campo de nombre se almacena como la cookie en el navegador.
HTML
<html>
<head>
<script type="text/javascript">
< !--
function Cookie() {
if (document.myform.customer.value == "") {
alert("Enter some value");
return;
}
cookievalue = escape(document.myform.customer.value) + ";";
document.cookie = "name=" + cookievalue;
document.write("Setting Cookies: " +
"name=" + cookievalue);
}
//-->
</script>
</head>
<body>
<form name="myform" action="">
Enter name: <input type="text" name="customer" />
<input type="button" value="Set Cookie"
onclick="Cookie();" />
</form>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por dudhanevrushali28 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA