客户端存储——Storage

方法

1. setItem(name, value):为指定的键设置值
2. getItem(name):获取指定键的值
3. key（index）：获取index位置的键名
4. removeItem(name):根据指定的键删除键值对
5. clear():删除所有的简直对

测试：

sessionStorage.setItem("book", "Professional JavaScript");

const sessionLength = sessionStorage.length;

for(let i=0;i<sessionLength;i++){
    const key = sessionStorage.key(i);
    console.log(`${i}:${key}`);
}

测试结果：

实例化对象

• sessionStorage
  定义：sessionStorage存储某个特定会话的数据，这些数据值保持在浏览器运行期间。
  特点：
  1、sessionStorage中的数据可以跨越页面刷新而存在
  2、绑定于某个特定的服务器会话
  3、相当于一个页面的全局变量，可以用来记录某个页面的访问次数

• globalStorage
  定义：拥有特定访问限制的跨越会话存储数据
  特点：
  1、globalStorage不算是storage的实例化对象，globalStorage['baidu.com'](指定哪个域名可以访问
  该数据)才算是storage的实例化对象，才能使用storage对象中的所有方法

• localStorage
  定义：localStorage和globalStorage都是用于用户数据的长久存储，但是他没有规则的限制，规则早已制定好：只有来自同一域名，使用同一协议，在同一端口上的页面才可以访问localStorage中存储的数据，localStorage已经代替globalStorage来进行长久用户数据的存储

storage事件

• 触发时间
  只要对Storage对象进行修改，就会在document上触发这个事件，例如调用setItem，removeItem或者clear方法时都会触发这个事件
• 具体使用方法

    EventUtil.addHandler(document, "storage", (event) => {
        const change = `Storage changed for ${event.domain}-${event.key}-${event.oldValue}-${event.newValue}`;
        console.log(change);
    })

监听事件的返回对象参数有：

• domain:发生变化的域名
• key：发生修改的键
• oldValue：修改前的值
• newValue：修改后的值

注意：这个事件对localStorage和sessionStorage都有用，但是无法判断是哪一个

使用事例

function updateCounter(){
    document.getElementById('count1').innerHTML = sessionStorage.pageLoadCount;
    document.getElementById('count2').innerHTML = localStorage.pageLoadCount;  
}

function counter(){
    if(localStorage.getItem('pageLoadCount') === null){
        localStorage.setItem('pageLoadCount', 0);
    }

    if(sessionStorage.getItem('sessionCount') === null){
        sessionStorage.setItem('pageLoadCount', 0);
    }

    localStorage.pageLoadCount = parseInt(localStorage.getItem('pageLoadCount'))  + 1;
    sessionStorage.pageLoadCount = parseInt(localStorage.getItem('pageLoadCount')) + 1;

    updateCounter();
}

counter();

可以看到每刷新一次页面，pageLoadCount都会加1，但是当关掉这个页面的时候，sessionStorage中的pageLoadCount会还原成1，localStorage中的pageLoadCount还是原来的数