Web Storage 是HTML 5引入的一个重要的功能，在前端开发的过程中会经常用到，它可以在客户端本地存储数据，类似cookie，但其功能却比cookie强大的多。cookie的大小只有4Kb左右（浏览器不同，大小也不同），而web Storage的大小有5MB。LocalStorage与SessionStorage是Web Storage 的两种形式。
Web Storage是什么？ |
- 存储机制
Web Storage 存储机制是一种通过 key/value键值对方式来安全地存储和使用客户端数据的方法 - 发展历程
- 作用
旨在提高网站访问效率。通过减少与服务器端进行请求传输，降低宽带资源占用，将某些可复用性强（偏静态）的数据保存在客户端，直接读取客户端保存的数据。
localStorage、sessionStorage与cookie的异同 |
特性 | Cookie | localStorage | sessionStorage |
数据的生命期 | 一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效 | 除非被清除(清除浏览器缓存或者removeItem)，否则永久保存 | 仅在当前会话下有效，关闭页面或浏览器后被清除 |
数据量限制 | 每个域名下可创建的Cookie数量有限制 | 数据条数无限制 | |
存放数据大小 | 4K | 约5M | |
与服务器端通信 | 每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题 | 仅在客户端（即浏览器）中保存，不参与和服务器的通信 | |
易用性 | 需要程序员自己封装，源生的Cookie接口不友好 | 源生接口可以接受，亦可再次封装来对Object和Array有更好的支持 | |
localStorage的局限 |
1、各浏览器的localStorage大小不统一，并且IE只在IE8以上版本才支持localStorage。
2、localStorage只能存储字符串，任何格式的数据在存储的时候都会被自动转为字符串，所以读取的时候，需要进行类型的转换。
3、localStorage本质上是对字符串的存储和读取，存储数据会消耗浏览器的内存空间，存储数据多的情况下，会影响浏览器响应效率。
4、localStorage在浏览器的隐私模式下是不可读取的。
5、localStorage不能被爬虫抓取到。
应用场景 |
有了对上面这些差别的直观理解，我们就可以讨论三者的应用场景了。
因为考虑到每个 HTTP 请求都会带着 Cookie 的信息，所以 Cookie 当然是能精简就精简啦，比较常用的一个应用场景就是判断用户是否登录。针对登录过的用户，服务器端会在他登录时往 Cookie 中插入一段加密过的唯一辨识单一用户的辨识码，下次只要读取这个值就可以判断当前用户是否登录啦。曾经还使用 Cookie 来保存用户在电商网站的购物车信息，如今可使用 localStorage替代。
而另一方面 localStorage 接替了 Cookie 管理购物车的工作，同时也能胜任其他一些工作。比如HTML5游戏通常会产生一些本地数据，localStorage 也是非常适用的。如果遇到一些内容特别多的表单，为了优化用户体验，我们可能要把表单页面拆分成多个子页面，然后按步骤引导用户填写。这时候 sessionStorage 的作用就发挥出来了。
安全性的考虑 |
需要注意的是，不是什么数据都适合放在 Cookie、localStorage 和 sessionStorage 中的。使用它们的时候，需要时刻注意是否有代码存在 XSS 注入的风险。因为只要打开控制台，你就随意修改它们的值，也就是说如果你的网站中有 XSS 的风险，它们就能对你的 localStorage 肆意妄为。所以千万不要用它们存储你系统中的敏感数据。
sessionStorage与localStorage的作用域 |
这里的作用域指的是：如何隔离开不同页面之间的localStorage（总不能在百度的页面上能读到腾讯的localStorage吧）
- localStorage只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份localStorage数据。
- sessionStorage比localStorage更严苛一点，除了协议、主机名、端口外，还要求在同一窗口下。怎么理解这个同一窗口呢？比如在A页面中设置了sessionStorage，只有通过A页面中打开的其他同网站内的其他页面才可以读取到这个值(当然还有限制，详见下文opener属性)。至于localStorage的话，假如在某服务器的某端口下部署了多个网站，各个网站之间是可以读取到这个值的（可使用Hbulider简单测试下便知）。
注意
1. localStorage
localStorage的生命周期是永久性的。假若使用localStorage存储数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据（清除浏览器缓存或者removeItem）
2. sessionStorage
sessionStorage 的生命周期是在浏览器关闭前。也就是说，在整个浏览器未关闭前，其数据一直都是存在的。其基本的判断和使用方法和localStorage的使用是一致的。有几点需要注意的：
<1>页面刷新不会删除数据
<2> 直接通过<a href='xx.html'>打开页面无法获取window.opener属性
<3>在新打开的页面（直接网址打开）传递的sessionStorage具有隔离性
<4>使用window.open打开页面和改变localtion.href方式都可以获取到sessionStorage内部的数据（通过window.open和localtion.href打开的页面依然可以获得window.opener属性）
rel ="noreferrer" 标记在单击链接时隐藏引用者信息 (目前已失效)rel ="noopener" 在新标签中打开链接时不会引入开启者的信息(目前已失效)
Storage接口 |
Storage 接口用于脚本在浏览器保存数据。
window.sessionStorage和window.localStorage属性返回的数据类型都是Storage，支持HTML5的浏览器都实现了Storage接口，因此这两个属性都可以返回一个Storage对象。
Storage接口只有一个属性
-
Storage.length返回存储在Storage对象内的 key/value 对的个数。
Storage接口提供五个方法
Storage.key(n) 返回存储在Storage对象内的第 n 条数据的 key 。Storage.getItem(key)返回指定key的value。Storage.setItem(key,value)向Storage对象内添加或更新 key/value。Storage.removeItem(key)从Storage对象内删除指定 key/value。Storage.clear()从Storage对象内删除所有 key/value。
localStorage的用法 |
localStorage和sessionStorage方法和属性用起来是一样的，两者不同之处在于生命周期，以下用localStorage进行讲解。
localStorage的浏览器支持情况：
localStorage的写入和读取（三种方式） |
<script>
localStorage.name='Yasuo'
localStorage.setItem('age',24)
localStorage['game']='lol'
console.log(localStorage.name)
console.log(localStorage['age'])
console.log(localStorage.getItem("game"))
</script>
localStorage只支持string类型的存储，所以我们存进去的值都变成了string类型。
而我们通常使用到的是json字符串，我们可以 JSON.stringify()方法将js对象转为json字符串，之后我们还可以使用 JSON.parse() 方法将json字符串转为json对象
localStorage.name='Yasuo'
localStorage.setItem('age',24)
localStorage['game']='lol'
console.log(localStorage)
console.log(JSON.stringify(localStorage))
console.log(JSON.parse(JSON.stringify(localStorage)))
可见，localStorage返回的是Storage对象类型
虽然有多种方法进行存取，但是官方推荐getItem\setItem，因为这种写法更符合面向对象编程。
localStorage的删除 |
- 删除指定属性
localStorage.removeItem("name")- 清空整个localStorage对象
localStorage.clear() localStorage的获取键名 |
<script>
localStorage.name='Yasuo'
localStorage.setItem('age',24)
localStorage['game']='lol'
console.log(localStorage.key(0),localStorage.key(1),localStorage.key(2))
</script>控制态输出的是：name age game
localStorage.key(0) 填入的是key的索引值，从0开始，根据localStorage写入值的顺序递增
