Cookie，Local Storage和Session Storage的区别，以及使用场景

前言

我们来聊聊Cookie，Local Storage和Session Storage的不同之处以及使用场景

Cookie

由服务端产生内容发送到浏览器并保存在本地每次浏览器向同一服务器发送请求时都会将cookie发送会服务器。Cookie来回的传递

1. 使用场景

• 记录用户的会话状态、身份验证和跟踪用户的行为等。例子：
• 收集用户的兴趣爱好的信息，推送广告。跟踪用户添加的购物车商品，下次打开浏览器仍然有相同的商品

2. 优点

• 在浏览器和服务器间来回传递适用于跟踪用户行为
• 可以手动设置过期时间灵活调节存储时间

3. 缺点

• 每次请求都会携带Cookie数据增加流量浪费性能
• 在HTTP中明文传输不够安全容易被篡改
• 存储容量小，4kb

Local Storage

是一个webApi运行在浏览器中长期存储键值对数据

1. 使用场景

• 存储用户的个人偏好设置，比如：
• 主题选择，隐私设置等

2. 优点

• 存储容量大，一般为5M
• 存储的数据在哭护短浏览器可以永久保存，不担心丢失（关闭浏览器也不会丢失）
• 操作方便，API友好能通过JavaScript之间访问

3. 缺点

• 受同源策略的影响，一个网站只能访问它自己域下的Local Storage，不能访问其他域名下的数据
• 不支持在不同浏览器下共享数据

Session Storage

它与Local Storage类似，但数据仅在浏览器会话期间有效，只在单个浏览器标签页或者窗口之间共享数据，关闭后数据会被清除

1. 使用场景 假设有一个多步骤的表单，用户在填写信息过程中可以点击 上一下/下一步 修改数据 Session Storage会暂存内容
2. 优点

• 数据只在存储客户端
• 刷新页面仍有原来会话数据
• 每个标签/窗口数据独立
• 存储容量大，一般为5M

3. 缺点

• 不适合长期存储（浏览器关闭就会清除数据）

不同点

共同点