cookie sessionStorage localStorage

  • 使用 document.cookie 获取和改变

cookie 作用域

  1. 省略domain参数，那么domain默认为当前域名。
  2. domain参数可以设置父域名以及自身，但不能设置其它域名，包括子域名，否则cookie不起作用。
  3. 有效作用域：domain本身以及domain下的所有子域名。

sessionStorage localStorage

  • 设置数据：setItem(key,value)
  • 获取数据：getItem(key)
  • 删除数据：removeItem(key)
  • 清空所有数据：clear()
  • 获取所有keys
const keys = Array.from(
  { length: localStorage.length },
  (_, index) => localStorage.key(index)
);

当前页面使用的 localStorage 被其他页面修改时会触发 StorageEvent 事件

事件在同一个域下的不同页面之间触发，即在 A 页面注册了 storge 的监听处理，只有在跟 A 同域名下的 B 页面操作 storage 对象，A 页面才会被触发 storage 事件

  • key：被设置或删除的键
  • newValue：键被设置的新值，若键被删除则为 null
  • oldValue：键变化之前的值

三者区别

传递：

  1. cookie数据始终在同源的http请求中携带（即使不需要），即会在浏览器和服务器间来回传递
  2. sessionStorage 和 localStorage 不会⾃动把数据发给服务器，仅在本地保存

存储⼤⼩：

  1. cookie 数据⼤⼩不能超过 4k
  2. sessionStorage 和 localStorage 虽然也有存储⼤⼩的限制，但⽐ cookie ⼤得 多，可以达到5M或更⼤

有期时间：

  1. localStorage 存储持久数据，浏览器关闭后数据不丢失除⾮主动删除数据
  2. sessionStorage 数据在当前浏览器窗⼝关闭后⾃动删除
  3. cookie 设置的 cookie 过期时间之前⼀直有效，即使窗⼝或浏览器关闭

API 简易性

  1. cookie 需要自己封装
  2. sessionStorage 和 localStorage 都有现成的API
Last Updated:
Contributors: kingmusi