JavaScript 客户端存储之 sessionStorage + localStorage

1 背景

• 两者目的是：解决，通过客户端存储不需要频繁发送回服务器的数据时，的问题。
• cookie是每次发送请求，cookie数据也会发送。
• sessionStorage 和 localStorage 统称为 Storage 类型。
• 浏览器中两者均不受页面刷新影响

2 特性

Storage 实例与其他对象一样，但增加了一些方法？

1. clear（）：删除所所有值；（不在Firefox中实现）
2. getItem（name）：取得给定 name 的值
3. key（index）：取得给定 index 的值，
4. removeItem（name）：删除给定 name 的值
5. setItem（name，value）：设置给定 name 的值 value

以上某些方法，也可以通过操作对象属性操作达到效果：

1. 设置 属性的值：sessionStorage.name = ‘Jack’；
2. 获取 属性的值：sessionStorage.name；
3. 删除：delete sessionStorage.name；

3 不同

sessionStorage 是跨会话的存储机制，会话结束sessionStorage 就会消失

localStorage 是永久存储机制

4 监听Storage对象变化事件

   // 监听Storage对象变化事件
    window.addEventListener('storage',(event)=>{
      // event对象有四个属性：
      // 1、domain:存储变化的域
      // 2、key ：发生变化的键
      // 3、newValue：被设置的新值；如果是被删除，值为unll;
      // 4、oldValue：之前的值，
    });