localStorage 和 sessionStorage

浏览器的储存机制 — storage

• localStorage 和 sessionStorage

方法	localStorage	sessionStorage	cookie
生命周期	永久	会话下有效, 关闭页面或浏览器后被清除	设置有效期之前有效
大小	5M 左右	5M 左右	4K 且一般为 20 个
于服务器通信	不参与服务器通信	不参与服务器通信	每次请求放在请求头中
作用域	同文档源共用 文档源通过协议、主机名以及端口确定	也是文档源级别 只有当前标签页可用	同源可用–协议/域名/端口

• localStorage 和 sessionStorage
• 属性
  • length
    所储存信息的条数
• 方法
  • setItem(key:String, val:Any)
    储存一条数据, key 和 val 都必须是字符串,如果不是则会被转成字符串
  • getItem(key:String)
    获取一条数据, 如果 key 不存在则返回 null
  • removeItem(key:String)
    删除一条数据, 如果 key 不存在该方法不做任何事情
  • clear()
    清除所有储存的数据, 返回 undefined
  • key(index:Number)
    返回指定下标的数据, 配合 length 属性可以循环出所有的数据
• 监听事件
  • window.addEventListener(‘storage’, onStorageChange);

    Storage 接口储存的数据发生变化时，会触发 storage 事件，可以指定这个事件的监听函数。 这个事件接收一个 event 实例对象作为参数

  • Event
    • key
      字符串，表示发生变动的键名。如果 storage 事件是由 clear()方法引起，该属性返回 null。
    • newValue
      字符串，表示新的键值。如果 storage 事件是由 clear()方法或删除该键值对引发的，该属性返回 null
    • oldValue
      字符串，表示旧的键值。如果该键值对是新增的，该属性返回 null
    • storageArea
      对象，返回键值对所在的整个对象。也说是说，可以从这个属性上面拿到当前域名储存的所有键值对。
    • url
      字符串，表示原始触发 storage 事件的那个网页的网址

注意，该事件有一个很特别的地方，就是它不在导致数据变化的当前页面触发，而是在同一个域名的其他窗口触发。也就是说，如果浏览器只打开一个窗口，可能观察不到这个事件。比如同时打开多个窗口，当其中的一个窗口导致储存的数据发生改变时，只有在其他窗口才能观察到监听函数的执行。可以通过这种机制，实现多个窗口之间的通信