Bridge 个人博客

本地存储

2022/8/22
  1. 特点：cookie 是最简单的本地存储方式，当我们发起网络请求时，会将cookie添加到请求的header中的cookie字段。因此cookie的体积限制严格，一般不超过 4k，且由于不管cookie会不会用到都会被带上，会增加网络开销。
  2. 属性：cookie的属性包括 expires、domain、path、secure、HttpOnly，每个属性之间通过 ; 隔开。具体格式如下
"key=name; expires=Thu, 25 Feb 2016 04:18:00 GMT;domain=ppsc.sankuai.com; path=/; secure; HttpOnly"

  • expires

    • expires 属性设置了 cookie 过期的时间，且时间格式必须为 GMT 格式（可以通过 new Date().toGMTString() 或者 new Date().toUTCString() 来获得））。
    • 如果没有设置，则默认浏览器关闭后失效。
    • 失效的cookie会被浏览器清除

  • domain 和 path

    • domain 是 域名，path 是 路径，两者结合限制了 cookie 能被哪些 URL 访问。如果 http 请求的域名与 domain 相同或是其子域，且路径与 path 相同或是其子路径，则该 http 请求的 header 会带上该 cookie
    • 如果不进行设置，domain 默认值为当前域名，path 默认值为当前路径

  • secure

    • 设置了 secure 则 cookie 只会在 HTTPS 或其他安全协议的请求时携带
    • 默认不开启

  • httponly

    • 设置了 HttpOnly 为 true 后，将无法通过 js 获取、修改、删除这个 cookie，只能通过服务器去操作这个 cookie
    • 默认不开启
  1. 方法：document.cookie = " "
    cookie 的 增、删、改都使用上述方法。删除时只需要把 expires 的值设为过去的时间，其他属性保持一致即可将改 cookie 删除；修改时只需要重新赋值，其他属性保持一致即可覆盖旧值。

# webStorage

以键值对形式存储，存储的方式只能为字符串，可分为以下两种：

# localStorage

特点：持久化的本地存储，数据永远不会过期，关闭浏览器也不会丢失

# sessionStorage

特点：同一个会话中的页面才能访问且会话结束后数据随之销毁。

通过点击链接（或者用了 window.open）打开的新标签页之间是属于同一个 session 的，但新开一个标签页总是会初始化一个新的 session，即使网站是一样的，它们也不属于同一个 session。

localStorage 和 sessionStorage 有着统一的API接口，以 localStorage 为例

  1. 设置
  /** 设置键值对 **/
  localStorage.setItem(key, value)  // 方法1
  localStorage.key = value   // 方法2
  localStorage['key'] = value  // 方法3

  /** key 和 value 必须是字符串，当 value 是数组或对象是，必须先转化成字符串 **/
   var obj = {
      name: '张三',
      age: 18
   }
   // 可用 JSON.stringify() 将对象或数组转换成字符串，获取时调用 JSON.parse() 转换回去
   localStorage.setItem('user', JSON.stringify(obj))
  1. 获取
  localStorage.getItem(key)
  1. 移除
  localStorage.remove(key)  // 移除某个localStorage
  localStorage.clear()    // 移除所有
  1. 获取长度
  localStorage.length
  1. 通过索引获取对应位置的 key 值
  key(index)

与cookie的区别：
1）存储方式：cookie数据始终在同源的http请求中携带，会在客户端与服务器端来回传送；而webStorage只会将数据存储在本地
2）存储大小：cookie数据由于每次http请求都要携带，所以体积限制严格，一般不超过4k；而webStorage限制较小，可以达到5M或更大
3）生命周期：cookie在其设定的过期时间前有效；webStorage生命周期如上面所写

# 应用场景

cookie 常用于记录用户登录信息，或利用cookie跟踪记录用户点击次数、停留时间等习惯
sessionStorage 常用于页面间传递信息
localStorage 可用于存储访问该页面的次数或某些固定不变的信息

参考文章：
HTML5的几种存储方式 (opens new window)
cookie、sessionStorage、localStorage 详解及应用场景 (opens new window)

Web Worker