Web前端实现本地存储
1、本地化存储概念以及历史
- 历史：
- 概念
| 类型 | |
| HTPP cookie |
1.HTTP cookie的缺点很明显，最多只能存储4KB的数据，每个HTTP请求都会被传送回服务器，明文传输（除非你使用SSL）。
2.Cookie是为了解决HTTP无状态的特性而出现的，也可以叫用户识别机制。
|
| userData | 借助DHTML的behaviour属性来存储本地数据， 允许每个页面最多存储64K数据，每个站点最多640K数据，userData的缺点显而易见，它不是Web标准的一部分，除非你的程序只需要支持IE， 否则它基本没什么用处。 |
| Flash cookie | Flash cookie默认允许每个站点存储不超过100K的数据，如果超出了，Flash会自动向用户请求更大的存储空间，借助Flash的 ExternalInterface接口，你可以很轻松地通过Javascript操作Flash的本地存储。Flash的问题很简单，就是因为它是 Flash。 |
| Gears | Gears内置了一个基于SQLite的嵌入式 SQL数据库，并提供了统一API对数据库进行访问，在取得用户授权之后，每个站点可以在SQL数据库中存储不限大小的数据，Gears的问题就是 Google自己都已经不用它了。 |
从上面的简介我们可以看出，在以前，本地存储面临的主要问题是，对于存储容量较大的方式，需要特定的插件支持；对于不需要插件支持的存储方式，则处于安全问题或者大小限制而遭到扼杀。在这种双重的矛盾面前，HTML5本地存储横空出世，对于前端开发人员是一种巨大的福音。
2、HTML5本地存储
所谓的HTML5本地存储更精确的说法应该是DOM存储。根据MDN的定义，DOM存储的机制是通过存储字符串类型的键/值对,来提供一种安全的存取方式.这个附加功能的目标是提供一个全面的,可以用来创建交互式应用程序的方法(包括那些高级功能,例如可以离线工作一段时间)。
| DOM存储 | |
| 会话存储（SessionStorage ） | 用于临时保存针对一个窗口（或标签页）的数据。在访客关闭窗口或者标签页之前，这些数据是存在的，而关闭之后就会被浏览器删除。 |
| 本地存储（LocalStorage ） | 用于长期保存网站的数据，并且站内任何页面都可以访问该数据。 |
3、DOM存储中本地存储与会话存储的异同
1.本地存储和会话存储的操作代码完全相同，它们的区别仅在于数据的寿命。
2.本地存储主要用来保存访客将来还能看到的数据。
3.会话存储则用于保存那些需要从一个页面传递给下一个页面的数据。