Local Storage、Session Storage、Cookies

元嘉木

2023-12-01

Local Storage

Local Storage，也叫本地存储，是 HTML5 中新增的 web 存储的功能，它解决了客户端存储的一些缺点，并提供更强大的功能和操作API。

Local Storage 有效期：永不失效，除非 web 应用主动删除。

// 清除指定 key
window.localStorage.removeItem('key')
// 清除所有
window.localStorage.clear()

Local Storage 作用域：Local Storage 的作用域是限定在文档源级别的。文档源通过协议、主机名以及端口三者来确定。

同一个文档源，使用 window.localStorage.setItem() 添加的项，可以在其他标签页获取。

Session Storage 有效期：Session Storage 的有效期是和存储数据脚本所在的最顶层的窗口或者是浏览器标签是一样的，一旦窗口或者标签页被永久关闭了，存储的数据也就失效了。

Session Storage 作用域：Session Storage 的作用域也是限定在文档源级别。但需要注意的是，如果相同文档源的页面渲染在不同的标签中，Session Storage 的数据是无法共享的。

Cookies 默认有效期非常短暂，存在于 web 浏览器会话期间，当浏览器关闭，cookie也就消失了。如果要延长cookie的有效期，可以设置 max-age 属性（单位秒）。

Cookies 作用域是通过 domain 文档源和 path 文档路径来确定的。默认情况下，cookie和创建它的web页面有关，并对 web 页面和该 web 页面同目录或者子目录的其他 web 页面可见。当设置 path = “/”，它的作用域就变成文档源级别的了。

RFC 2965推荐标准（浏览器保存cookie不超过300个，为每个服务器保存的cookie不超过20个，每个cookie大小不超过4KB）。localStorage、sessionStorage设置值时可以达到8M。