浅聊Web Storage（localStorage 和 sessionStorage）、cookie的使用场合

最新推荐文章于 2024-11-07 16:59:28 发布

蓝莓味柯基

最新推荐文章于 2024-11-07 16:59:28 发布

阅读量796

点赞数 9

分类专栏：八股文章标签：前端服务器运维

本文链接：https://blog.csdn.net/weixin_45705239/article/details/140696045

版权

八股专栏收录该内容

16 篇文章 0 订阅

订阅专栏

Web Storage（localStorage 和 sessionStorage）、cookie

一、Cookie
二、Web Storage

一、Cookie

Cookies 主要用于以下几种情况：

会话管理（Session Management）: 登录、购物车、游戏得分，或者任何服务端应当记住的信息。
个性化（Personalization）: 用户偏好设置、主题和其他设置。
跟踪（Tracking）: 记录和分析用户行为。

详细说明如下：

会话管理
当用户在网站上进行操作时，服务器需要通过某种方式来识别各个请求是否来自同一浏览器。例如，在电子商务网站上，用户加入购物车中的商品必须与该用户的会话关联起来，这样在结账时网站才能发送正确的商品信息。Cookies 可以用于存储唯一的会话标识符，从而帮助维持用户会话状态。
个性化
站点可以使用 Cookies 来存储用户个性化设置，如语言偏好、地区设置或字体大小等。通过读取这些 Cookies，网站可以在用户每次访问时提供定制化的体验，无需用户重新配置其偏好设置。
跟踪
Cookies 经常用于网站分析，网站会利用 Cookies 来追踪用户在网站上的路径和行为。这有助于网站所有者了解用户偏好，改进网站内容和营销策略。广告网络也经常使用 Cookies 来收集有关用户兴趣的数据，并展示目标广告。
安全性
有些 Cookies（通常称为安全 Cookies）用于加强网络安全，比如防止 CSRF 攻击（跨站请求伪造），它们可以确保请求是由用户明确意愿发起的。
跨站点请求
Cookies 还可以用于实现第三方服务，例如社交媒体按钮、嵌入式内容或在线聊天服务。这些功能可能需要跨多个网站工作，并依赖于特定的 Cookies 来确保配置和用户偏好能够随处可用。

注意事项

隐私权：因为 Cookies 可以用于跟踪用户在网站上甚至跨站点的行为，所以涉及到隐私问题。欧盟的《通用数据保护条例》（GDPR）和其他隐私法规要求网站获取用户同意才能使用 Cookies 进行跟踪。
限制：一些现代浏览器在默认隐私模式下会限制跨站点跟踪 Cookies，尤其是第三方 Cookies。用户还可以自行清除 Cookie，或者设置浏览器禁用 Cookies。
替代方案：随着 Web 技术的发展，某些 Cookies 的用途可能会被新技术所替代，如 Web Storage（localStorage 和 sessionStorage）、IndexedDB 或服务器端会话。

在设计应用程序时应慎重考虑使用 Cookies 的目的，并确保遵守相关的法律法规，同时为用户提供透明的隐私选项。
Cookies 通常有大小限制（每个域名下约 4 KB），因此只包含必要的数据。通常，Cookies 存储的是引用数据，如标识符或令牌，而更详细的数据则存储在服务器端。

二、Web Storage

Web Storage API 提供了两种在客户端存储数据的机制，这两种机制分别是 localStorage 和 sessionStorage。它们都允许网页存储键值对，以便在页面加载时可以读取使用。不过，它们的主要区别在于数据存储的生命周期和作用域。

localStorage

localStorage 用于长期保存数据，即使关闭浏览器后数据仍然保存在用户的设备上。除非明确通过脚本删除或用户清除浏览器缓存，否则这些数据不会消失。

特点：

容量：通常有较大的存储限额（至少5MB）。
持久性：数据永久保存，除非用户手动删除或由脚本清除。
作用域：同源的所有窗口、标签页都能够共享相同的 localStorage 数据。
应用场景：适用于需要跨会话持久保存的数据，如用户偏好设置、主题选择等。

使用示例：

// 设置 localStorage 中的键值对
localStorage.setItem('username', 'JohnDoe');

// 获取存储的值
const username = localStorage.getItem('username');

// 删除一个键值对
localStorage.removeItem('username');

// 清空所有存储
localStorage.clear();

sessionStorage

与 localStorage 相比，sessionStorage 是为了在单个会话中存储数据而设计的。这意味着存储在 sessionStorage 中的数据只在页面的单次会话期间可用，即页面关闭后数据就被清除了。

特点：

容量：通常有较大的存储限额（至少5MB）。
持久性：数据只在页面会话期间存在，当页面会话结束（页面关闭）时数据就会丢失。
作用域：数据只在创建它的窗口或标签页中有效；即使是相同的页面，在不同的标签页中也无法共享 sessionStorage 数据。
应用场景：适用于某些数据只应在页面当前生命周期内保留，如表单输入数据或一次性登录验证。
使用示例：

// 设置 sessionStorage 中的键值对
sessionStorage.setItem('sessionKey', '12345');

// 获取存储的值
const sessionValue = sessionStorage.getItem('sessionKey');

// 删除一个键值对
sessionStorage.removeItem('sessionKey');

// 清空所有存储
sessionStorage.clear();