localStorage 与 sessionStorage

localStorage和sessionStorage是差不多的，允许浏览器在本地数据存储，以键/值对的形式存储。唯一不同的点：

• sessionStorage会在浏览器会话结束的时候就会删除数据。
• localStorage会一直保留数据，并不会自动删除，除非用户或开发者手动删除。

但是，不是有了Cookie了吗？怎么还有另外两种存储方式？

• 与Cookie会被发送到服务器不同的是，localStorage和sessionStorage不会被发送到服务器，因此可以在本地存储 2m 甚至更多。
• 而且，localStorage和sessionStorage不像Cookie一样有许多HTTP header操纵存储对象，所有的操作都只会在本地的JS中完成。
• localStorage和sessionStorage的存储绑定了源（协议、端口号、主机名）

注意：键值必须是字符串

方法

localStorage和sessionStorage的方法是一样的：

• setItem(key, value) —— 存储键/值对
• getItem(key) —— 获取键对应的值
• removeItem(key) —— 删除键对应的值
• clear() —— 删除所有数据
• key(index) —— 获取该索引下的键名
• length —— 存储的内容的长度

例如：

let lo = localStorage
lo.setItem(1, '小明')
console.log(lo.getItem(1))    //'小明'
lo.removeItem(1)    
console.log(lo.getItem(1))    // null

遍历localStorage和sessionStorage

目前没有方法可以获取所有保存的值和键，所以只能循环遍历：

for(let i = 0; i < localStorage.length; i++){
    let key = localStorage.key(i)
  console.log(`${key}:${localStorage.getItem(key)}`)
}

还有一种方式就是使用 for....in 语句：

for(let key in localStorage){
  console.log(`${key}:${localStorage.getItem(key)}`)
}

但是这个方法除了打印出localStorage的数据时，也会把localStorage的原型的数据打印出来，所以需要用 hasOwnProperty 过滤原型：

for(let key in localStorage){
  if(localStorage.hasOwnProperty(key)){
      console.log(`${key}:${localStorage.getItem(key)}`)
  }
}

字符串的localStorage和sessionStorage

因为键值必须是字符串，如果把对象存储进去，会如下情况：

localStorage.user = {name:"小明"}
console.log(localStorage.user)    //[object Object]

为了避免此情况，需要使用JSON来存储对象：

localStorage.user = JSON.stringify({name:"小明"})
console.log(localStorage.user)    //{"name":"小明"}
let user = localStorage.user
console.log(user.name)    // '小明'

sessionStorage的限制

sessionStorage与localStorage相比，除了会话结束后会删除数据外，还有更多的限制：

• 数据只存在与当前页面，就算是相同页面不同的窗口，数据也会不一样。
• 但是，同一个标签下的iframe之间是共享的（前提是同一个源）
• 页面刷新后，数据依然会保留。

Storage事件

每当sessionlStorage与localStorage数据发生变化的时候，就会触发一次Storage事件。有如下属性：

• key —— 发生更改的数据的key，如果调用的是 .clear() ，则为null
• oldValue ——旧值，如果是新增了数据，则为null
• newValue ——新值，如果是删除了数据，则为null
• url —— 发生数据变更的文档的url
• storageArea —— 发生数据更新的 localStorage 或 sessionStorage 对象

总结

• sessionlStorage与localStorage允许浏览器存储键值对数据。
• 键值对必须是字符串。
• sessionlStorage与localStorage这两个对象的方法是一样的。
• 想要获得sessionlStorage与localStorage的所有的键值对，需要循环遍历才能获得。
• 如果需要存储对象，必须要用 JSON.stringify 方法转换成JSON才能可以，不然存进去会变成object字符串。