一、Web Storage是什么？
在HTML4中可以使用Cookie，在客户端保存诸如用户名等简单的用户信息。但是通过长期的使用，人们发现用Cookie存储数据存在以下几个问题：
大小：Cookie的大小被限制在4kb。
带宽：Cookie是随HTTP事务一起被发送的,因此会浪费一部分发送Cookie时使用的带宽。
复杂性：要正确的操作Cookie是很困难的。
针对这些问题，在HTML5中重新提供了一种在客户端本地保存数据的功能，它就是Web Storage功能。Web Storage功能，顾名思义，就是在Web上存储数据的功能。这里的存储是针对客户端本地而言的。Web Storage与Cookie相似，区别是:
Web Storage可以存储更大容量的数据（一般为5MB）。
Web Storage仅在客户端（即浏览器）中保存，不参与和服务器的通信。
Web Storage拥有setItem()、getItem()、removeItem()、clear()等方法，不像Cookie，需要前端开发者自己封装setCookie、getCookie。
二、localStorage和sessionStorage
Web Storage分为两种：sessionStorage和localStorage。
sessionStorage将数据保存在Session对象中。所谓Session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间。存储在sessionStorage里面的数据在页面会话结束时会被清除，页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话，不会消除数据。
localStorage将数据保存在客户端本地的硬件设备（通常指硬盘，也可以是其他硬件设备中），即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站的时候仍然可以继续使用。
相同点
1、都是保存在浏览器端
都是保存在浏览器端的数据，不同浏览器无法共享localStorage和sessionStorage信息。
2、都是同源的
不同源的页面无法共享localStorage和sessionStorage信息。所谓同源就是同域名、同端口、同协议。
3、操作方法相同
localStorage和sessionStorage都具有相同的操作方法，不但可以用自身的setItem()，getItem()等方便存取，也可以像普通对象一样用点“.”操作符，及“[]”的方式进行数据存取。（下文有详细介绍）
不同点
1、生命周期不同
localStorage为永久存储，除非用户手动清除localStorage信息，否则这些信息将永远存在。
sessionStorage为临时保存，生命周期为当前窗口或标签页，一旦窗口或标签页被关闭了，那么所有通过sessionStorage存储的数据也就被清空了。
2、作用域不同
首先明确的是：不同浏览器无法共享localStorage或sessionStorage信息；不同源的页面无法共享localStorage或sessionStorage信息。
localStorage信息可以在相同浏览器中同源的不同页面间共享，可以是在不同标签页中的页面、也可以是在不同窗口的页面。
sessionStorage信息不可以在不同页面或标签页间共享，即使是相同浏览器、相同窗口中的同源页面。这里需要注意的是：
页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。
在当前页面通过a链接打开的同源页面，也可以访sessionStorage数据，不论是哪种跳转方式。
使用window.open和localtion.href打开的同源页面也可以获取到sessionStorage数据。
这是因为sessionStorage是页面级的，只有全部关闭当前页和从其内部打开的所有页面，或者直接关闭浏览器，才可以消除当前页的sessionStorage数据。
为了验证，我准备了两个html文件，一个是index.html，另一个是other.html。
index.html代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<a href="other.html" target="_blank">other.html</a>
</head>
<body>
</body>
<script>
//演示设置Storage的三种方法
var oLStorage = window.localStorage;
var oSStorage = window.sessionStorage;
oLStorage.setItem("localName","zhangsan");
oLStorage.localAge="25";
oLStorage["localSex"]="nan";
oSStorage.setItem("sessionName","zhangsan");
oSStorage.sessionAge="25";
oSStorage["sessionSex"]="nan";
</script>
</html>
other.html代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>other</title>
</head>
<body>
<p>other.index和index.html属于相同域名和端口的页面</p>
</body>
<script>
console.log('localStorage'+window.localStorage);
console.log('sessionStorage'+window.sessionStorage);
</script>
</html>
从index.html点击a链接进入other.html，在other.html的Application里可以看到localStorage和sessionStorage。
打开一个新的标签页，直接输入other.html的地址，在other.html的Application里可以看到localStorage，却看不到sessionStorage。
三、Web Storage的操作方法
localStorage和sessionStorage都具有相同的操作方法,下文以sessionStorage为例，localStorage类似。
setItem()存储value
用途：将value存储到key字段
用法：.setItem( key, value)
代码示例：
sessionStorage.setItem("name", "zhangsan");
getItem()获取value
用途：获取指定key本地存储的值
用法：.getItem(key)
代码示例：
var value = sessionStorage.getItem("name");
removeItem()删除value
用途：删除指定key本地存储的值
用法：.removeItem(key)
代码示例：
sessionStorage.removeItem("name");
clear()清除所有的key/value
用途：清除所有的key/value
用法：.clear()
代码示例：
sessionStorage.clear();
key() 获取键值
用途：获取指定索引index对应的键值key
用法：.key(index)
代码示例：
sessionStorage.key(0);
length 获取长度
用途：获取本地存储的长度
用法：.length
代码示例：
sessionStorage.length
Web Storage不但可以用自身的setItem(),getItem()等方便存取，也可以像普通对象一样用点“.” 操作符，及“[]”的方式进行数据存取，像下例的代码：
var oSStorage = window.sessionStorage;
oSStorage.setItem("sessionName","zhangsan");
oSStorage.sessionAge="25";
oSStorage["sessionSex"]="nan";
四、storage 事件
对 storage 对象进行任何修改，都会在文档上触发 storage 事件。当通过属性或 setItem() 方法保存数据，使用 delete 操作符或者 removeItem() 删除数据，或者调用 clear() 方法时，都会触发该事件。
可以对storage事件进行监听：
object.addEventListener("storage", 监听函数,false/true);
storage的event 对象有如下属性：
key：设置或者删除的键名。
oldValue:表示变更前的值。
newValue:变更后的值，如果是设置值，则是新值；如果是删除键，则是 null。
url:事件触发源的URL。
source:事件触发源的URL。
storageArea:受到影响的storage对象。
domain 发生变化的存储空间的域名。
