每日一句
Idleness is the root of all evil.
释义：懒惰乃万恶之源。
前言
为了解决cookie存储空间（4k）不足的问题, webStorage为我们提供了两种机制来解决。sessionStorage是其中一种，具体可转至sessionStorage。
webStorage的另外一个机制就是localStorage,存储在本地，可永久存储数据，除非手动清除。
localStorage
API
| 名称 | 作用 | 示例 |
|---|---|---|
| setItem | 存储数据 | localStorage.setItem('name', 'zhangsan') |
| getItem | 读取数据 | localStorage.getItem('name') |
| clear | 清空localStorage上存储的数据 | localStorage.clear() |
| removeItem | 删除某个具体变量 | localStorage.removeItem('name') |
| key | 读取第i个数据的名字或称为键值(从0开始计数) | localStorage.key(0) |
| length | 获取localStorage存储变量的个数 | localStorage.length |
局限
localStorage提供了5M的存储空间，相对于cookie突破了4k的限制，也减约了带宽，那它也有自身的局限。
-
localStorage存储的键和值始终采用 UTF-16DOMString格式，每个字符使用两个字节。与对象一样，整数键会自动转换为字符串。 -
localStorage数据特定于文档的协议。意思是http://example.com与https://example.com下的localStorage是不同的对象，相互之间访问不了。 -
localStorage在浏览器的隐私模式下访问不到 -
localStorage不能被爬虫抓取到 -
localStorage本质上是对字符串的读写，如果存储内容多的话会消耗内存空间，会导致页面变卡 -
数据如果超出5M就会报错
扩展
-
一个webview打开了a.html,a.html里有按钮点击之后通过js桥又打开了一个webview, 此时webview打开了b.html。这里两个不同的webview能共享一个
localStorage。（此时两个webview是同一个浏览器，不同标签页而矣。不同的浏览器localStorage不共享。） -
如果5M不够，如何扩容呢？
1.可参考使用iframe给页面的localStorage扩容
2.当然也可以使用浏览器提供的本地数据库IndexDB。允许储存大量数据，提供查找接口，还能建立索引。更接近 NoSQL 数据库。
site.demo.com与www.demo.com这两个域下不能共享同一个localStorage, 如果需要共享需要设置同一个域
如果设置同一个域是可能共享localStorage,也会带来一个新的问题。
假设子域名设置过多，也都设了同域，就会造成localStorage存满报错情况，那就杯具了！解决的方案：
1.还是各自域名各自设，不要设在同域下，互不影响。
2.少量的数据可以通过url传参解决。
3.最不可取的方案就是打开本项目时用js删除其他与本项目无关的localStorage数据。
小结
-
存储的key，value都是字符串，如果是其他格式或有特殊字符，需要通过
JSON.stringify()和JSON.parse()配合使用 -
cookie、sessionStorage、localStorage异同点
| 特性 | Cookie | localStorage | sessionStorage |
|---|---|---|---|
| 数据的生命期 | 一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效 | 除非被清除，否则永久保存 | 仅在当前会话下有效，关闭页面或浏览器后被清除 |
| 存放数据大小 | 4K左右 | 一般为5MB | |
| 与服务器端通信 | 每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题 | 仅在客户端（即浏览器）中保存，不参与和服务器的通信 | |
| 易用性 | 需要程序员自己封装，源生的Cookie接口不友好 | 源生接口可以接受，亦可再次封装来对Object和Array有更好的支持 |
