原创力文档- 1、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。。
- 2、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
- 4、该文档为VIP文档，如果想要下载，成为VIP会员后，下载免费。
- 5、成为VIP后，下载本文档将扣除1次下载权益。下载后，不支持退款、换文档。如有疑问请联系我们。
- 6、成为VIP后，您将拥有八大权益，权益包括：VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 7、VIP文档为合作方或网友上传，每下载1次， 网站将根据用户上传文档的质量评分、类型等，对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
htmlstorage基础
HTML5的SessionStorage与Local Storage
HTML5中的存储分为三部分(FF中还提供了globalStorage，但不支持web sql database)：
1、SessionStorage
2、LocalStorage
3、Web SQL Database
?
?
它们与Cookie最大的不同之处在于，cookie在向后台发送每一个http请求的时候都会出现在http头部，而html5的本地存储则不会，某种程度上讲是节约了一定的带宽，缩短了请求、响应的时间。而且ie6中对每一个域的cookie数限制为20个以内，大小也有限制
?
SessionStorage 类似设置一个会话Cookie（即不设置过期时间，当关闭浏览器或是页面时，会话Cookie将被清除）
?
各浏览器对存储的支持情况：
更多规范和参考，可以阅读：DiveInto HTML5? Storage
?
SessionStorage与LocalStorage他们都拥有相同的方法（常用有如下4个，更多信息可参考HTML5 APP）:
1、setItem(key, value)
2、getItem(key)
3、removeItem(key)
4、clear()
要注意的事项：
1、setItem中的key、value使用的是字符串的形式进行存储的。也就是说如果有如下的代码：setItem(‘price’, 12);
通过getItem(‘price’) + 5 得到的将不是预期的17(整数)，而是’125’(字符串)
2、再次使用setItem设置已经存在的key的value时，新的值将替代旧的值
?
当存储中的数据发生改变时，会触发相应的事件（但目前各浏览器对此事件的支持并不完善，暂时可以忽略）
?
这里有几个在线的例子：
html5 SessionStorage Demo
html5demos storage
html5 localStorage (name/value item pairs) demo
?
国外一位blogger写的关于LocalStorage教程：
Part One: Getting to Know localStorage
Part Two: Making localStorage Work For You
Part Three: Writing a Functioning Web App
Part Four: Putting The Finishing Touches On
还有一个完整的APP应用，地址在这里：/ ，源代码在github上：/monkeecreate/monkeeTime
?
?
有兴趣可以延伸阅读关于DOM Storage相关的说明：
MDC DOM Storage
domcached(跨浏览器的)
jStorage - store data locally with JavaScript
HTTP Cookie
Flash Local Storage
IE userData behavior
DOMCached对各浏览器的支持情况（有基于prototype和jquery的两个版本）
?
关于web sql Database，可以阅读：introducing web sql database? 需要注意它的事务“回滚”
例如先删除一张表，然后试图向那张表去插入数据，这将导致事务回滚（表将重新被恢复），在线示例：/database-rollback
分类: HTML5/CSS3
文档评论（0）