PDD面试官：请聊聊你是如何实现弹窗的弹出策略的

引言

在简历中，我阐述了在项目中使用localStorage技术实现了某一个功能。

利用localStorage控制运营弹窗的弹出策略，避免用户刷新门户时频繁看到弹窗。

运营弹窗功能展示
于是，面试官就开始针对LocalStorage相关的知识点及常见的客户端存储方法，展开了猛烈的进攻，不出意料的我没有完全hold住，所以，我决定对常见的cookie，sessionStorgae和localStorage三种客户端存储从定义和用法等角度进行总结并找出其中的异同，清晰地梳理这部分知识点，希望能牢固地掌握这块知识。

介绍

什么是cookie

Http cookie通常叫做cookie，是一种存储在计算机上的小型文本文件，由网站的服务器生成并发送随后存储在用户的浏览器上，用于跟踪用户的活动和存储用户特定的偏好信息。

cookie的来源

cookie的来源如下图所示，用户第一次访问网站的时候，浏览器会发送请求，服务在响应该http请求的时候，会在响应头中添加一个Set-Cookie属性，值为一个名为"name"，值为value的cookie，浏览器会存储这些会话，每次发送http请求时候都会将它们发送给服务器。

格式如下：

makefile 复制代码

Http/1.1 200 ok
Content-type: text/html
Set-Cookie: name-value
Other-header: other-header-value

cookie的机制与构成

cookie的构成

名称：唯一标识cookie的名称。cookie不区分大小，但是实践过程中最好人为区分值：存储在cookie里的字符串值。这个值必须经过URL编码。域：cookie的有效域。发送到这个域的所有请求都会包含对应的cookie。路径：请求URL中包含这个路径才能把cookie发送到服务器中。过期时间：表示何时删除cookie的时间戳。安全标志：设置之后，只有在SSL安全连接的情况下，才会把cookie发送到服务器。（SLL（安全套接层）是一种用于保护在Internet上传输的数据安全的标准安全技术，通常和Https一起使用）

cookie的机制

cookie是与特定域绑定的。设置cookie后，它会与请求一起发送到创建它的域，能保证不被其他域访问。 cookie的最大存储空间为4KB，如果存储的cookie超过了cookie的存储空间，那么根据最少使用原则(LRU)删除不经常使用的cookie。

cookie的应用场景

存储信息： Cookie 可以存储有关用户的信息，如用户的身份认证、网站偏好设置、购物车内容等。
跟踪用户活动： 许多网站使用 Cookie 跟踪用户在网站上的活动，例如记录用户的登录状态、浏览历史、点击行为等。
实现持久登录： 当用户登录网站时，网站可以将一个身份验证标识符存储在 Cookie 中，使得用户在会话期间保持登录状态，即使用户关闭浏览器后再次访问网站也能够自动登录。
个性化体验： 网站可以根据用户的偏好设置存储在 Cookie 中来提供个性化的体验，例如语言偏好、主题选择、字体大小等。
广告定位： 一些广告商和分析服务商使用 Cookie 来跟踪用户的兴趣和行为，从而向用户展示相关的广告内容。

cookie的优缺点

优点

跨会话持久存储： 可以在用户的不同会话之间持久存储信息，例如用户的登录状态、偏好设置等，使用户能够在多个访问周期中保持一致的体验。
客户端存储： Cookie 存储在用户的本地计算机上，减轻了服务器的负担，减少了服务器端存储和处理的压力。
易于实现： 使用 Cookie 只需要简单的设置和读取操作，浏览器和服务器都提供了相应的API，便于开发者使用。
支持跨域访问： 可以在同一浏览器中共享 Cookie 数据，使得用户在不同网站之间传递数据变得更加容易。

缺点

隐私问题： Cookie 可能会暴露用户的个人信息和行为轨迹，造成隐私泄露，尤其是在用户不知情的情况下被广告商或第三方跟踪。
安全风险： 可能会受到跨站点脚本攻击（XSS）和跨站点请求伪造（CSRF）等安全威胁，使得用户的信息受到损害。
容量限制： 每个 Cookie 的存储容量通常受到限制，一般为4KB左右，无法存储大量的数据。
传输开销： 每次 HTTP 请求都会携带相应的 Cookie 数据，可能会增加网络流量和延迟。

SessionStorage

什么是sessionStorage

sessionStorage 是 HTML5 提供的一种客户端存储数据的机制，用于在客户端（即用户的浏览器）中临时存储会话级别的数据。

sessionStorage的特点

会话级别的数据存储：数据存储在客户端的会话期间有效，当用户关闭浏览器标签或窗口时会被清除，因此适合存储一些临时性的会话数据。
域内共享： sessionStorage 中存储的数据仅对当前页面及同源的其他页面可见，无法在不同浏览器标签页之间共享。
存储大小为5MB左右
安全性：与 Cookie 不同，sessionStorage 中存储的数据仅在客户端，不会在每次请求中传递给服务器，因此相对更安全。

sessionStorage的用法及其应用场景

seesionStorage的常用API:

csharp 复制代码

// 保存数据到 sessionStorage
sessionStorage.setItem("key", "value");

// 从 sessionStorage 获取数据
let data = sessionStorage.getItem("key");

// 从 sessionStorage 删除保存的数据
sessionStorage.removeItem("key");

// 从 sessionStorage 删除所有保存的数据
sessionStorage.clear();

sessionStorage适用于会话临时存储数据的场景，比如我司的访问资讯后的已读未读状态，使用了sessionStorage存储登录用户所访问过的资讯。

LocalStorage

什么是LocalStorage

localStorage 是 HTML5 提供的一种客户端存储数据的机制，与 sessionStorage 类似，用于在客户端（即用户的浏览器）中永久存储数据。与 sessionStorage 不同，localStorage 存储的数据在浏览器关闭后仍然保留，直到用户手动删除或清除浏览器缓存。

LocalStorage的特点

永久存储：数据存储在客户端永久有效，即使用户关闭浏览器或重新启动计算机，数据仍然会被保留下来。
域内共享：localStorage 中存储的数据对于同一域名下的所有页面都是可见的，不同页面之间可以共享存储的数据。
容量较大：localStorage 的存储容量通常比 sessionStorage 大，一般为 5MB 左右，可以存储相对较大量的数据。
存储大小为5MB左右。
安全性：与 sessionStorage 类似，localStorage 中存储的数据仅在客户端，不会在每次请求中传递给服务器，因此相对更安全。

LocalStorage的用法及其应用场景

localStorage的常用API和sessionStorage基本相同，此处不再展示。 localStorage 主要用于需要在浏览器会话之间永久存储数据的场景，例如保存用户的偏好设置、记住用户的登录状态、缓存应用程序数据等，比如此处的运营弹窗的弹出次数的控制就是采用了localStorage的技术实现的。但需要注意的是，由于 localStorage 中存储的数据永久有效，因此存储大量数据时需要考虑用户隐私和浏览器性能的影响。

比较

特性	Cookie	localStorage	sessionStorage
存储容量	4KB	通常约为 5MB	通常约为 5MB
生命周期	可以设置过期时间，会话级或持久型	永久有效，除非被清除或手动删除	当前会话期间有效，关闭标签或窗口后清除
数据传输	每次请求都携带，增加网络流量	不自动传输，仅在客户端存储	不自动传输，仅在客户端存储
安全性	可以设置安全标志和 HttpOnly 标志	无特殊安全性设置	无特殊安全性设置
API 使用和操作	通过 JavaScript 的 document.cookie API	使用 localStorage 对象的 API	使用 sessionStorage 对象的 API
适用场景	存储小型数据，如会话标识符、用户偏好设置等	存储较大量的数据，如本地缓存数据、用户个性化设置等	临时存储会话级别的数据，如表单数据、页面状态等
跨域传输	是	否	否
是否与服务器交互	是	否	否
数据共享性（作用域）	不同域名间不共享	同一域名下共享	同一域名下共享
是否受浏览器设置限制	是	否	否

总结

cookie，sessionStorage和localStorage是三个十分常见的客户端存储方式，熟练掌握三者的差异，才能应对工作中各种复杂的应用场景，希望这些总结能给予大家一些帮助。

参考

MDN
深入了解浏览器存储--从cookie到WebStorage、IndexedDB

《JavaScript高级程序设计》