Tabla de contenido
1. El período de validez del tiempo de almacenamiento es diferente
En segundo lugar, el tamaño de almacenamiento es diferente
3. Comunicación con el servidor
En cuarto lugar, la conveniencia de las operaciones de lectura y escritura.
Cookie, localstorage y sessionStorage son todos métodos para almacenar temporalmente información o datos de la sesión del cliente . A continuación, se presentan brevemente las diferencias entre los tres:
1. El período de validez del tiempo de almacenamiento es diferente
1. Se puede configurar el período de validez de la cookie . Por defecto, expirará después de cerrar el navegador.
2. El período de validez de sessionStorage solo se mantiene en la página actual y dejará de ser válido después de cerrar la página de sesión actual o el navegador.
3. El período de validez de localStorage siempre es válido sin eliminación manual
En segundo lugar, el tamaño de almacenamiento es diferente
1. El almacenamiento de cookies es de aproximadamente 4 kb y la capacidad de almacenamiento es relativamente pequeña. Generalmente, una página puede almacenar hasta 20 piezas de información
2. La capacidad de almacenamiento de localStorage y sessionStorage es de 5 Mb (introducción oficial, puede haber algunas diferencias con los navegadores)
3. Comunicación con el servidor
1. La cookie participará en la comunicación con el servidor y, por lo general, se incluye en el encabezado de la solicitud http, como alguna clave de verificación de clave, etc.
2. localStorage y sessionStorage son almacenamiento front-end puro y no participan en la comunicación con el servidor
En cuarto lugar, la conveniencia de las operaciones de lectura y escritura.
1, galleta
La operación de cookies es engorrosa y algunos datos no se pueden leer.
- Creación de cookies (la modificación y la creación son lo mismo, crear el mismo nombre sobrescribirá el anterior)
//JavaScript 中，创建 cookie 如下所示：
document.cookie="username=John Doe";
//您还可以为 cookie 添加一个过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 在浏览器关闭时删除：
document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";
//您可以使用 path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面。
document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";- lectura de galletas
var x = document.cookie;- Eliminación de cookies
//删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可，如下所示，设置为 Thu, 01 Jan 1970 00:00:00 GMT:
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";2, sesión de almacenamiento
- almacenar un dato
sessionStorage.setItem('数据名', '数据值');- leer un dato
let data = sessionStorage.getItem('数据名');- borrar un dato
sessionStorage.removeItem('数据名');- eliminar todos los datos
sessionStorage.clear();3, almacenamiento local
- almacenar un dato
localStorage.setItem('数据名', '数据值');- leer un dato
let data = localStorage.getItem('数据名');- borrar un dato
localStorage.removeItem('数据名');- eliminar todos los datos
localStorage.clear();