526互联

Cookie、localStorage、sessionStorage

发布时间 2023-06-06 20:09:50作者: Code6E

本文参考了以下视频

  1. cookie、localStorage 和 sessionStorage的区别及应用实例
  2. 浏览器本地存储

Cookie是一种存储机制
HTTP Cookie（也叫 Web Cookie 或浏览器 Cookie）是服务器发送到用户浏览器并保存在本地的一小块数据（一般不超过4kb）。浏览器会存储 cookie 并在下次向同一服务器再发起请求时携带并发送到服务器上。通常，它用于告知服务端请求是否来自同一浏览器——如保持用户的登录状态。Cookie 使基于无状态的 HTTP 协议记录稳定的状态信息成为了可能。
image
浏览器查看位置
image
如果没有设置HttpOnly，则可以直接通过JS读取Cookie(document.cookie)，Cookie是字符串，格式为"key1=value1; key2=value2; ..."，多个键值对之间以分号空格"; "的形式隔开
image

比如在用户下次登录时，浏览器会根据Cookie自动填充用户名。如下是这个过程的简单实现
image

Window.localStorage和Window.sessionStorage

localStorage对象和sessionStorage对象都是HTML5的新特性之一。键值对总是以字符串的形式存储
image
localStorage和sessionStorage都有setItem('key', 'value')，getItem('key')，removeItem('key')，clear()方法
以sessionStorage为例

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

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

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

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

因为键值对总是以字符串的形式存储
注意

  1. 存储在 sessionStorage 或 localStorage 中的数据特定于页面的协议。也就 是说 http://example.com 与 https://example.com 的 sessionStorage/localStorage 相互隔离。
  2. 被存储的键值对总是以 UTF-16 DOMString 的格式所存储，其使用两个字节来表示一个字符。所以数值，复杂数据类型（对象，数组等）的数据会自动转换成字符串形式。
    若不想让复杂数据类型被转成字符串而造成数据丢失，比如对象类型的数据会转换成[object Object]，可以在存储的时候用JSON.stringfy()将其转换成JSON字符串，用的时候再JSON.parse()恢复

localStorage

存储在 localStorage 的数据可以长期保留(存储在计算机硬盘中)，

关机后再用同一浏览器打开以前登录过的页面仍能保持登录状态，这就是利用了localStorage。但是用另一浏览器打开同一网站（前提是该浏览器以前未登录过该网站），却不能保持登录状态，是因为不同浏览器存放localStorage数据的地方不是同一个地方
以下简单地模拟了利用localStorage保存历史上搜索过的数据，sessionStorage也能实现这样的功能，把以下代码中的localStorage换成sessionStorage就好啦
image

sessionStorage

当页面被关闭时，存储在 sessionStorage 的数据会被清除。

  • 页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。
  • 在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文，这点和 session cookie 的运行方式不同。
  • 打开多个相同的 URL 的 Tabs 页面，会创建各自的 sessionStorage。
  • 关闭对应浏览器标签或窗口，会清除对应的 sessionStorage。

以下是Cookie、localStorage、sessionStorage间的对比
image
由于cookie是与请求一起发送的，而localStorage、sessionStorage是存在本地，所以cookie体积比localStorage
、sessionStorage小得多