sessionStorage，localStorage，cookie都可以实现客户端存储，三者的区别有哪些了？
cookie作为最早期的被设计web浏览器存储少量数据，从底层看，它是作为http协议的一种扩展实现。cookie数据会自动在web浏览器和web服务器之间传输数据。
cookie有效期：cookie默认有效期非常短暂，存在于web浏览器会话期间，当浏览器关闭，cookie也就消失了。如果要延长cookie的有效期，可以设置max-age属性（单位秒）
cookie作用域：cookie作用域是通过domain文档源和path文档路径来确定的。默认情况下，cookie和创建它的web页面有关，并对web页面和该web页面同目录或者子目录的其他web页面可见。当设置path="/"，它的作用域就变成文档源级别的了。
localStorage, sessionStorage是html5中新增的web存储的功能，它解决了客户端存储的一些缺点，并提供更强大的功能和操作API。
localStorage有效期：永不失效，除非web应用主动删除。
localStorage作用域：localStorage的作用域是限定在文档源级别的。文档源通过协议、主机名以及端口三者来确定。
sessionStorage有效期：sessionStorage的有效期是和存储数据脚本所在的最顶层的窗口或者是浏览器标签是一样的，一旦窗口或者标签页被永久关闭了，存储的数据也就失效了。
sessionStorage作用域：sessionStorage的作用域也是限定在文档源级别。但需要注意的是，如果相同文档源的页面渲染在不同的标签中，sessionStorage的数据是无法共享的。
除了上述列举的，cookie和localStorage、sessionStorage在存储大小的限制也不一样， 由于每个浏览器的实现标准都不一样，只说一下RFC 2965推荐标准（浏览器保存cookie不超过300个，为每个服务器保存的cookie不超过20个，每个cookie大小不超过4KB）。localStorage、sessionStorage设置值时可以达到8M.
localstorage官方建议5M的存储空间，它只能存储字符串格式的数据，所以最好在每次存储时把数据转换成json格式，取出的时候再转换回来。
例如我用的是angularjs：
localStorage.setItem(“name”,angular.toJson(panda));
localStorage主要有以下几种方法：
setItem(“key”,“value”)：存储名字为key的一个值value，如果key存在，就更新value
getItem(“key”)：获取名称为key的值，如果key不存在则返回null
removeItem(“key”)：删除名称为“key”的信息，这个key所对应的value也会全部被删除
clear()：清空localStorage中所有信息
key()：键的索引
一个简单的例子：
localStorage.setItem(“name”,“panda”);//设置name为panda
localStorage.setItem(“name”,“Jane”);//覆盖之前的值，现在name所对应的值是Jane
localStorage.getItem(“name”);//获取name的值，即Jane
localStorage.removeItem(“name”);//删除name以及name的值
localStorage.clear();//清除localstorage里边所有数据
function forEachKey(callback) {//遍历显示localStorage中的key
for (var i = 0; i < localStorage.length; i++) {
callback(localStorage.key(i));
}
}
sessionStorage和localStorage用法差不多。
1、sessionStorage和localStorage 是类似cookie和session，但他们的存储量较他们大了很多，是一种本地存储机制，并不能代替cookie在HTTP中的作用，所以有的地方还是要用cookie的，要是只作为本地存储东西可以用。
2、storage 还提供了事件，当值清空或者改变时会触发。
window.addEventListener('storage', function () {
alert('storage 改变了')
})
这个方法是在一个写监听，另一个页面改变，然后会有结果，如果浏览器只开一个页面没有反应，你可以将当前页面再在浏览器打开一个，就能看到效果了 。