本地存储

在Web开发中，我们有几种方式可以在用户的浏览器中存储数据，以便于在用户与网站交互时保持状态。这些方式包括sessionStorage、localStorage和cookie。

sessionStorage

sessionStorage提供会话级别的存储，数据只在当前浏览器窗口或标签页中有效，并且当窗口或标签页关闭后数据会被清除。

特点：

临时存储，窗口关闭则数据消失。
仅以字符串形式存储数据。
存储空间一般为5MB。

基本操作：

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

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

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

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

localStorage

localStorage提供持久化的本地存储，数据没有过期时间，会一直保存直到主动删除。

特点：

永久存储，需要手动清除。
仅以字符串形式存储数据。
存储空间一般为5MB。

基本操作：

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

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

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

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

由于localStorage和sessionStorage只能存储字符串，因此需要使用JSON.stringify()来存储对象，使用JSON.parse()来解析存储的对象。

let obj = { name: "xiaosutongxue", age: 27 };

// 存储对象
localStorage.setItem('obj', JSON.stringify(obj));

// 读取并解析对象
const parsedObj = JSON.parse(localStorage.getItem('obj'));

cookie 是一种在服务器端生成并在客户端存储的小段文本信息，用于识别用户状态。

特点：

存储大小限制，通常为4KB。
每次HTTP请求都会发送cookie数据，除非设置了域限制。

理解HTTP请求的无状态性与cookie的作用

在网站交互中，HTTP协议本身是无状态的，意味着服务器无法识别不同请求是否来自同一个用户。为了解决这个问题，cookie被用作一种状态管理机制。

cookie的工作原理

登录与cookie设置：
- 用户首次登录网站时，服务器会验证用户的凭据。
- 登录成功后，服务器生成一个cookie并发送给用户的浏览器。
- 浏览器将cookie保存在本地存储中。
后续请求与cookie的使用：
- 用户进行后续请求时，浏览器会自动将存储的cookie附加到请求中发送给服务器。
- 服务器通过检查cookie中的数据来识别用户的身份和状态。

cookie的特点

存储限制：cookie的大小通常限制在4KB左右，不同浏览器可能有所不同。
自动发送：浏览器会自动将cookie随请求发送到服务器，无需额外编程。
安全性：由于cookie中可能包含敏感信息，如会话标识，因此需要妥善处理以防止安全漏洞，如通过HTTPS传输cookie。

cookie的创建和管理

cookie是由服务器生成的一小段文本信息，它包含了诸如用户名、会话标识符等数据，以及关于cookie本身的元数据，如过期时间、路径和域等。

示例：

http

Set-Cookie: sessionId=abc123; Expires=Wed, 09 Jun 2024 10:18:14 GMT; Path=/; Secure; HttpOnly

在这个示例中，Set-Cookie响应头设置了名为sessionId的cookie，值为abc123，并指定了过期时间、路径和安全标志。

注意事项

敏感信息：不应在cookie中存储敏感信息，如密码或个人身份信息。
HttpOnly标志：使用HttpOnly标志的cookie不能被客户端脚本访问，有助于防止跨站脚本攻击（XSS）。
Secure标志：Secure标志确保cookie仅通过HTTPS传输，增强安全性。

基本操作：

shell

# cookie
npm i js-cookie # js版
npm i @types/js-cookie	# ts版

import Cookies from 'js-cookie';

// 设置cookie
Cookies.set('key', 'value', { expires: 7 });

// 读取cookie
const value = Cookies.get('key');

// 删除cookie
Cookies.remove('key');

注意：cookie的数据会在每次请求中自动发送到服务器，这可能会导致安全问题，因此敏感信息不应存储在cookie中。

`cookie`、`localStorage`和`sessionStorage`的区别

不同点

	cookie	localStorage	sessionStorage
通信方式	在浏览器与服务器之间传递，存储在HTTP头中，是HTTP规范的一部分。	仅在本地保存，不参与服务器通信，直接在本地获取数据。
作用域	在所有同源窗口中共享，无过期时间则仅当前会话有效。	在所有同源窗口中共享。	不共享于不同浏览器窗口或标签页，但在同一标签页内的多个iframe（同源）间共享。
存储大小	约4KB	约5MB。
存储内容类型	通常存储在内存中，设置过期时间则保存到硬盘。	仅存储字符串，需用JSON.stringify()和JSON.parse()处理复杂对象。
应用场景	保存登录信息和需要每次请求携带的信息。	长期保存数据，如长期用户登录状态。	敏感数据的一次性登录。
获取速度	每次请求都需发送到服务器，获取速度相对较慢。	存储在本地，获取速度快。
安全性	存在被截获的风险，但可通过设置Secure和HttpOnly属性提高安全性。	不随HTTP头发送，相对安全。
失效时间	可设置过期时间，否则为会话期有效。	永久有效，除非主动删除。	当前会话有效，关闭浏览器或标签页后被清除。

相同点

都保存在浏览器端。
都是同源的。

本地存储 ​

sessionStorage ​

localStorage ​

cookie ​

cookie、localStorage和sessionStorage的区别 ​

不同点 ​

相同点 ​

本地存储

sessionStorage

localStorage

cookie

`cookie`、`localStorage`和`sessionStorage`的区别

不同点

相同点