HTML5本地储存

昨天在学习写react的时候看到了学长写的关于本地储存的一些函数，对于我这个互联网小白来说感觉又长知识啦 ！！所以又上网搜了一些相关资料然后把自己觉得有用的东西记录了下来，第一篇文章啊哇咔咔，希望可以获得进步，加油~~~

概述

localStorage和sessionStorage,他们使得网页可以在浏览器端储备数据

sessionStorage保存的数据通常是在浏览器窗口关闭的时候就被清空localStorage储存的数据长期存在，下次再访问该网站时，网页可以直接读取以前保存的数据

这两个对象除了保存数据的期限长短不同，其余的属性和方法完全一致

确定浏览器是否支持

检查window对象是否包含sessionStorage和localStorage属性，可以确定浏览器是否支持这两个对象

// localStorage

if(window.localStorage){
 alert('This browser supports localStorage');
}else{
 alert('This browser does NOT support localStorage');
}

// sessionStorage

if(window.sessionStorage){
 alert('This browser supports sessionStorage');
}else{
 alert('This browser does NOT support sessionStorage');
}

操作方法

sessionStorage和localStorage保存的数据，都以“键值对”的形式存在

存入数据

存入数据用setItem方法。它接受两个参数，第一个是键名，第二个是保存的数据。

sessionStorage.setItem('key', 'value');

localStorage.setTime('key', 'value');

读取数据

读取数据使用getItem方法。它只有一个参数，就是键名。

var valueSession = sessionStorage.getItem('key');

var valueLocal = localStorage.getItem('key');

清除数据

removeItem方法用于清除某个键名对应的数据。

sessionStorage.removeItem('key');

localStorage.removeItem('key');

clear方法用于清除所有保存的数据。

sessionStorage.clear();

localStorage.clear();

遍历所有的键

利用length属性和key方法，可以遍历所有的键。

for (var i = 0; i < localStorage.length; i++) {
    console.log(localStorage.key(i));
}

其中的key方法，根据位置（从0开始）获得键值。

storage事件

当储存的数据发生变化时，会触发storage事件。我们可以指定这个事件的回调函数。

window.addEventListener('storage', onStorageChange);

回调函数接受一个event对象作为参数。这个event对象的key属性，保存发生变化的键名。

function onStorageChange(e) {
    console.log(e.key);
}

除了key属性，event对象的属性还有三个：

oldValue：更新前的值。如果该键为新增加，则这个属性为null。

newValue：更新后的值。如果该键被删除，则这个属性为null。

url：原始触发storage事件的那个网页的网址。

值得特别注意的是，该事件不在导致数据变化的当前页面触发。如果浏览器同时打开一个域名下面的多个页面，当其中一个页面改变sessionStorage或localStorage的数据时，其他所有页面的storage事件会被触发，而原始页面并不触发storage事件。可以通过这种机制，实现多个窗口之间的通信。所有浏览器之中，只有IE浏览器除外，它会在所有页面触发storage事件。