localStorage、sessionStorage 和 cookie介绍以及三者的区别

＆白帝＆

已于 2024-08-21 09:07:30 修改

阅读量761

点赞数 23

分类专栏：前端部分文章标签： javascript ecmascript 前端

于 2024-08-21 09:05:46 首次发布

本文链接：https://blog.csdn.net/qq_48763502/article/details/141377913

版权

前端部分专栏收录该内容

30 篇文章 1 订阅

订阅专栏

localStorage、sessionStorage 和 cookie 是 Web 存储技术中的三种方式，它们在客户端存储数据时各有特点和用途。下面是它们的详细介绍：

1. localStorage

存储时间：数据存储在浏览器中，直到显式地删除它们。即使浏览器关闭或计算机重启，数据也会被保留。
存储容量：大约 5MB（具体大小可能因浏览器而异）。
数据访问：可以通过 JavaScript 的 window.localStorage 对象访问。
数据共享：同一来源（协议、域名、端口）下的所有页面都可以访问存储在 localStorage 中的数据。
适用场景：适用于需要长期存储数据的场景，例如用户偏好设置或保存用户登录状态。

示例代码：

// 存储数据
localStorage.setItem('key', 'value');

// 获取数据
const value = localStorage.getItem('key');

// 删除数据
localStorage.removeItem('key');

// 清空所有数据
localStorage.clear();

2. sessionStorage

存储时间：数据仅在一个浏览器会话中有效。当浏览器窗口或标签页关闭时，数据会被清除。
存储容量：大约 5MB（具体大小可能因浏览器而异）。
数据访问：可以通过 JavaScript 的 window.sessionStorage 对象访问。
数据共享：只在同一浏览器窗口或标签页中有效，不同窗口或标签页之间无法共享。
适用场景：适用于需要在单次浏览会话中存储数据的场景，例如单页应用中的临时数据。

示例代码：

// 存储数据
sessionStorage.setItem('key', 'value');

// 获取数据
const value = sessionStorage.getItem('key');

// 删除数据
sessionStorage.removeItem('key');

// 清空所有数据
sessionStorage.clear();

3. cookie

存储时间：数据可以通过设置 expires 属性指定过期时间，默认情况下，cookie 在浏览器会话结束时被删除。
存储容量：通常每个 cookie 的大小限制为 4KB，整个域名下 cookie 的总数限制也存在（如 20 个 cookie）。
数据访问：可以通过 JavaScript 的 document.cookie 进行访问，通常需要对 cookie 字符串进行解析和设置。
数据共享：在同一域名下的所有页面都可以访问 cookie。cookie 可以通过设置 domain 和 path 属性来控制访问范围。
适用场景：适用于需要在服务器和客户端之间传递信息的场景，如用户身份验证、会话跟踪等。

示例代码：

// 设置 cookie
document.cookie = "key=value; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";

// 获取 cookie
const cookies = document.cookie; // 获取所有 cookies 的字符串

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

区别

localStorage、sessionStorage 和 cookie 都是用于在客户端存储数据的 Web 存储技术，它们各自有不同的特点和用途。以下是这三者的主要区别：

1. 存储时间

localStorage：数据存储在浏览器中，直到显式地删除它们。数据不会随着浏览器关闭而丢失，因此适合用于长期存储。
sessionStorage：数据仅在一个浏览器会话中有效。当浏览器窗口或标签页关闭时，数据会被清除，因此适合用于存储会话级别的数据。
cookie：数据可以设置过期时间，默认情况下，cookie 在浏览器会话结束时被删除。可以通过设置 expires 属性来使
cookie 在特定时间点过期，也可以设置 max-age 属性来指定存活时间。

2. 存储容量

localStorage 和 sessionStorage：通常每个存储区的容量限制为大约5MB（具体大小可能因浏览器而异），适用于存储较多的数据。
cookie：每个 cookie 的大小限制通常为 4KB，整个域名下的 cookie 数量也有限制（通常为 20
个）。因此适合存储少量的数据。

3. 数据访问

localStorage 和 sessionStorage：可以通过 JavaScript 的 window.localStorage 和 window.sessionStorage 对象进行访问。这些存储机制是通过 JavaScript API 进行操作的。
cookie：通过 JavaScript 的 document.cookie 属性访问。cookie是以字符串形式存储的，因此通常需要对字符串进行解析和处理。

4. 数据共享

localStorage 和 sessionStorage：数据只能在同一来源（协议、域名、端口）下的页面之间共享。例如，localStorage 和
sessionStorage 的数据在同一域名下的不同标签页或窗口间可以访问。
cookie：数据可以在同一域名下的所有页面之间共享。可以通过设置 domain 和 path 属性来控制 cookie 的访问范围。

5 数据传输

localStorage 和 sessionStorage：数据不会自动发送到服务器，因此它们仅在客户端使用。
cookie：数据会随着每个 HTTP 请求发送到服务器，这可以用于身份验证和会话跟踪等目的。由于 cookie
会随每个请求发送，可能会影响性能，特别是在数据量较大的情况下。

6 安全性

localStorage 和 sessionStorage：相对来说，localStorage 和 sessionStorage 是较为安全的，但仍需注意 XSS（跨站脚本攻击）风险，因为数据是存储在客户端的。
cookie：cookie 可能面临一定的安全风险，例如可以被 CSRF（跨站请求伪造）攻击利用。为了提高安全性，可以设置
HttpOnly 和 Secure 标志来减少风险。

7 总结