文章总结了什么是Web Storage；sessionStorage和localStorage的相同点与不同点；Web Storage的操作方法及storage 事件。
1 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。
2 localStorage和sessionStorageWeb 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。
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
用法：.k ey(index)
代码示例：
sessionStorage.key(0);length 获取长度
用途：获取本地存储的长度
用法：.length
代码示例：
sessionStorage.lengthWeb Storage不但可以用自身的setItem (),getItem ()等方便存取，也可以像普通对象一样用点“.” 操作符，及“[]” 的方式进行数据存取，像下例的代码：
var oSStorage = window.sessionStorage;oSStorage.setItem("sessionName","zhangsan");oSStorage.sessionAge="25";oSStorage["sessionSex"]="nan";
对 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 发生变化的存储空间的域名。
