2023年12月24日发(作者：)
HTML 5 WebStorage
一、前言
HTML5是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言的第五次重大修改。2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成。
HTML5 提供了两种在客户端存储数据的新方法：
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个session的数据存储
二、客户端存储的发展
客户端存储之前的历史大致如下图所示：
1. Cookie
由NetScape公司创造，指保存在用户本地终端内存或磁盘上的一小块数据，只能保存字符串类型，所有的cookie信息都会随着浏览器的请求而发送。cookie分为:
持久cookie: 数据保存在磁盘中。
会话cookie：数据保存在内存中，浏览器关闭后将被清除。
第一方cookie：当前访问站点的cookie。
第三方cookie: 非当前访问站点的cookie。假如当前正访问A网页，A网页中有访问B网页的链接，点击该链接，HTTP请求和响应头会包含B网页设置的cookie，相对于A网页即为第三方cookie。
尽管几乎所有浏览器都支持cookie，但容量小是它最致命的缺点，单域cookie数量不应超过20个，总长度不应超过4K，对于现在web应用本地存储数据量的需求是远远不够的，而且由于它是明文传输，禁止在cookie中保存如电话号码，账号密码等敏感信息。
2. UserData
由Microsoft公司在IE5.0中引入，指保存在用户本地终端的一块持久化字符串数据，除非手动删除或设置过期时间，否则数据将一直保存，只有IE5.0-IE9.0支持。它借助DHTML的behaviour属性来存储本地数据，允许每个页面最多存储64K数据，每个站点最多存储640K数据。它的缺点也是致命的，它并非Web标准，只有IE5.0-9.0支持，无法有效解决棘手的浏览器兼容问题。
3. Flash SharedObject
它允许你在本地客户端的硬盘或是服务器上存储所有flash支持的数据(Number, String, Array, Boolean, Object, XML等)，数据会永久性保存，没有过期时间，可以通过设置管理器或调用clear()方法清除。按存放位置可以分为本地共享对象和远程共享对象。默认存储大小为100KB，用户可以手动设置，最大为10M。它的问题同样致命，作为flash，它拥有flash拥有的安全、稳定性低，耗系统资源等所有缺点。
4. Google Gears
Google于07年发布的一个开源浏览器插件，内置了一个基于SQLite的嵌入式SQL数据库，并提供了统一的API访问数据库。在取得用户授权之后，每个站点可以在数据库中存储大小不限的数据。但是Google早在chrome
12.0 中就已经放弃了对它的支持。
三、WebStorge技术介绍
相对于上述本地存储方案，之后提出的HTML5本地存储中的WebStorage本地存储得到了最广泛的支持。浏览器兼容版本有IE8+/Chrome4+/FireFox3.5+
/Safari4+/Opera10.5+。它包括localStorage和sessionStorage两种存储方式，均只保存字符串类型。
Firefox3.5+/Opera10.5+/IE8+都支持最大存储5M的数据，而Chrome4+/Safari4+支持最大存储2.5M的数据。
localStorage用于持久化的本地存储，浏览器窗口关闭后，localStorage存储的数据仍然可以被访问。所有浏览器窗口可以共享localStorage的数据，保存的数据永远不会过期，只能手动删除。
而sessionStorage用于本地存储一个会话中的数据，它不是一种持久化的本地存储。这些数据只有在同一个会话中的页面才能访问，当前页面不可以访问新开页面的数据，并且会话结束后数据也随之销毁而无法使用。
localStorage和sessionStorage的属性和方法如下：
Name
length
remainingSpace
Description
获取存储的键值对的数量
获取存储空间剩余空间的大小(非标准，仅IE8.0+支持)
setItem(key, value)
将value值存储到本地的key字段
removeItem(key)
getItem(key)
clear()
删除指定key本地存储的值
获取指定key本地存储的值
删除localStorage中存储的所有数据
根据索引获取一个指定位置的键名
key(index)
localStorage 方法
localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。
如何创建和访问 localStorage：
下面的例子对用户访问页面的次数进行计数：
sessionStorage 方法
sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。
如何创建并访问一个 sessionStorage：
下面的例子对用户在当前 session 中访问页面的次数进行计数：
四、应用领域
无论是为了离线web应用，还是为了更好的用户体验，还是为了节省更多流量，很多web应用都需要我们能够在本地存储一些数据，于是出现了很多的基于浏览器的本地存储解决方案，比如cookie, userData, Flash
SharedObject, Google Gears, WebStorage, Silverlight, Open
Database等，而HTML 5 WebStorage作为性价比最高应用前景最广的技术显得尤为突出，一些WEB端的用户个性化设置皆可以用这种方式来实现。比如普通网站的登录注册，可以把之前的cookies作为替代，从而采用此种方式。
五、WebStorage的生存状态
HTML5的本地存储还有另外2个竞争者：Web SQL Database和Indexed Database。虽然相比于Indexed Database，Web SQL Database得到了更多浏览器的支持，包括Chrome3+/Opera10.5+/Safari3.2+，但是它已经是一个被废弃了的规范，W3C官方在2011年11月声明将不再维护Web
SQL Database规范，它大有被Indexed Database取代之势。
Indexed Database 是Oracle于2009年提出的，简称IndexedDB，是一种能让你在用户的浏览器中持久地存储结构化数据的数据库，为web应用提供了丰富的查询能力。它使用对象来保存数据，按域名分配独立空间，一个独立域名下可以创建多个数据库，每个数据库可以创建多个对象存储空间，一个对象存储空间相当于一个数据库表，可以存储多个对象数据。目前仅Chrome11+/Firefox4+/IE10支持。Firefox4+支持最大存储50MB的数据(移动端5MB)，chrome11+支持最大存储5MB的数据。
本地化存储一直是本地客户端程序优于web应用程序的一个方面，HTML5本地存储使得web应用能够将网站数据持久地存储到本地终端并在需要的时候通过JS随时获取，而且比cookie的容量大得多，掌握好它无疑是我们必备的技能之一。以上只是Web应用的本地存储策略的简单介绍，继续深入的理解和应用还需要在今后的项目中继续使用。
六、参考文献
[1] Gary Anthes. HTML5 leads a web revolution[J]. Communications of the ACM . 2012 (7)
[2] 胡忠望,刘卫东. Cookie应用与个人信息安全研究[J]. 计算机应用与软件. 2007(03)
[3] 郑培纯. 基于HTML5的多媒体播放网站[D]. 吉林大学 2014
[4] 杨梦颖. 基于HTML5的实时通信典型应用设计与实现[D]. 北京邮电大学 2014
[5] 王明超,陈榕. 基于脚本的客户端软件结构化存储技术研究[J]. 计算机技术与发展.
2010(02)
[6] 唐灿. 下一代Web界面前端技术综述[J]. 重庆工商大学学报(自然科学版). 2009(04)
发布评论