揭秘cookie、localStorage和sessionStorage的异同与应用妙招

2023-09-27 05:25:56

在前端开发中，我们经常会遇到需要在页面刷新或关闭后仍能访问的数据，这时就需要用到本地存储技术。本地存储技术有很多种，其中cookie、localStorage和sessionStorage是最常用的三种。这篇文章将详细介绍这三种技术的异同，并提供一些关于如何使用它们的技巧和建议，帮助您更好地利用这些技术来构建更强大的Web应用。

cookie

cookie是一种古老的本地存储技术，它是由服务器端设置的，并存储在客户端的浏览器中。cookie可以存储的数据有限，通常只有4KB左右。cookie的有效期也可以由服务器端设置，可以是会话级cookie（在浏览器关闭后失效）或持久性cookie（在指定的时间内有效）。

cookie的优点是它可以跨域共享，也就是说，在一个域名的网站上设置的cookie可以在另一个域名的网站上访问。cookie的缺点是它可能会被浏览器禁用或删除，而且它的大小有限制。

localStorage

localStorage是HTML5引入的一种本地存储技术，它与cookie类似，都是由浏览器存储的。localStorage的数据存储在浏览器的一个单独的文件中，因此它不受cookie大小的限制。localStorage的有效期是永久的，除非被显式删除。

localStorage的优点是它可以存储大量的数据，而且它不受cookie的限制。localStorage的缺点是它不能跨域共享，也就是说，在一个域名的网站上设置的localStorage数据不能在另一个域名的网站上访问。

sessionStorage

sessionStorage是HTML5引入的另一种本地存储技术，它与localStorage类似，都是由浏览器存储的。sessionStorage的数据存储在浏览器的一个单独的文件中，因此它不受cookie大小的限制。sessionStorage的有效期是会话级的，也就是说，在浏览器关闭后失效。

sessionStorage的优点是它可以存储大量的数据，而且它不受cookie的限制。sessionStorage的缺点是它不能跨域共享，而且它的有效期是会话级的。

三者区别

特性	cookie	localStorage	sessionStorage
存储大小	4KB	无限制	无限制
有效期	会话级或持久性	永久	会话级
作用域	跨域	同域	同域
应用场景	用户认证、购物车、语言偏好	用户设置、应用数据	会话数据、临时数据

如何使用

设置

// 设置cookie
document.cookie = "name=value";

// 设置localStorage
localStorage.setItem("name", "value");

// 设置sessionStorage
sessionStorage.setItem("name", "value");

获取

// 获取cookie
const value = document.cookie.split("=")[1];

// 获取localStorage
const value = localStorage.getItem("name");

// 获取sessionStorage
const value = sessionStorage.getItem("name");

删除

// 删除cookie
document.cookie = "name=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

// 删除localStorage
localStorage.removeItem("name");

// 删除sessionStorage
sessionStorage.removeItem("name");