本帖最后由 mxtkwy 于 2015-3-3 21:37 编辑
在工作中今天遇到了WebStorage的问题,特从网上查阅了一些资料整理下来跟大家共同学习!
HTML5提供了两种在客户端存储数据的新方法：
localStorage - 没有时间限制的数据存储 （持久化本地） sessionStorage - 针对一个 session 的数据存储 （内存方式存储）
之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。 Web应用的发展，使得客户端存储使用得也越来越多，而实现客户端存储的方式则是多种多样。最简单而且兼容性最佳的方案是Cookie，但是作为真正的客户端存储，Cookie则存在很多致命伤。 此外，在IE6及以上版本中还可以使用userData Behavior，在Firefox下可以使用globalStorage，在有Flash插件的环境中可以使用Flash Local Storage，但是这几种方式都存在兼容性方面的局限性，因此真正使用起来并不理想。 针对以上情况，HTML5中给出了更加理想的解决方案：假如你需要存储复杂的数据则可以使用Web Database，可以像客户端程序一样使用SQL(不过Web Database标准当前正陷于僵局之中，而且目前已经实现的浏览器很有限)。 假如你需要存储的只是简单的用key/value对即可解决的数据则可以使用Web Storage。 本文主要从各个方面介绍一下Web Storage的具体情况。 浏览器支持情况，如下图：
举个小例子，了解WebStorage 一个小的功能需求：记录用户每次访问页面的次数 - $(function(){
- if(!_isSupportWebStorage()){
- throw new Error("Not Support WebStorage APIs !") ;
- }
- _storePageCount() ;
- alert(_loadPageCount())
-
- }) ;
- function _storePageCount(){
- var storage = window.localStorage ;
- var pageLoadCount = storage.getItem("pageLoadCount") ;
- var stepOfCount = 1 ;
- if(!pageLoadCount){
- storage.setItem("pageLoadCount",stepOfCount) ;
- }
- else{
- storage.setItem("pageLoadCount",parseInt(pageLoadCount) + stepOfCount) ;
- }
- } ;
- function _loadPageCount(){
- var storage = window.localStorage ;
- return storage.getItem("pageLoadCount") ;
- } ;
- function _isSupportWebStorage(){
- return !!window.localStorage ;
- } ;
运行效果： 每次刷新页面时打印出访问量的次数 跟踪本地数据情况： 这时数据已经持久化到本地的硬盘上了 "WebStorage API"走马观花： length------当前Storage对象中存储的key/value对的总数 setItem(key, value)-------将key对象的值设置为value，value为String类型，当设置失败，比如用户将本地存储禁用，或者本地存储超过限制的大小时，抛出QuotaExceededError错误 getItem(key)------返回key对应的值，如不存在，返回null removeItem(key)------如果key在storage中存在，将key对应的key/value对从storage对象中删除；注意：不会返回删除的 value，如果key在storage中不存在，不进行任何处理 clear()------清除Storage对象上所有的key-value值 key(index)------返回index对应位置的key值，当index>length时，返回null，往storage对象上添加key-value值，通过key(index)取回的键是不固定的，跟通过for...in遍历普通的对象一样，依赖于浏览器的实现
这里列举出一些等价的操作： localStorage.author = "value" ;
localStorage["author"] = "value" ;
localStorage.setItem("author","value") ; 三，引入实例 今天给大家分享一个留言实时保存的例子。 js代码如下： - function upInfo() {
- var lStorage = window.localStorage;
- var show = window.document.getElementById("show");
- if (window.localStorage.myBoard) {
- show.value = window.localStorage.myBoard;
- } else {
- var info = "还没有留言";
- show.value = "还没有留言";
- }
- }
- function addInfo() {
- var info = window.document.getElementById("t1");
- var lStorage = window.localStorage;
- if (lStorage.myBoard) {
- var date = new Date();
- lStorage.myBoard += t1.value + "\n发表时间：" + date.toLocaleString() + "\n";
- } else {
- var date = new Date();
- lStorage.myBoard = t1.value + "\n发表时间：" + date.toLocaleString() + "\n";
- }
- upInfo();
- }
- function cleanInfo() {
- window.localStorage.removeItem("myBoard");
- upInfo();
- }
- upInfo();
- <body>
- <div>
- <h2>简单的web存储留言板</h2>
- <textarea id="t1"></textarea>
- <br />
- <input type="button" onclick="addInfo()" value="留言" />
- <input type="button" onclick="cleanInfo()" value="清除留言" />
- <br />
- <hr />
- <label id="shows"></label>
- <textarea id="show" readonly="readonly"></textarea>
- </div>
- </body>
大家可以把代码弄下来看看,并不断重构上面的实例，推荐的方式是过程化设计与面向对象思想设计相结合。最后总结 （1）理解WebStorage Api的使用方式以及具体实例中使用的目的是为了解决哪些问题。 （2 两个核心Api的不同之处在哪。
| 
|Archiver|手机版|小黑屋|珠峰培训--JavaScript培训
版权均归 北京珠峰世纪技术培训有限公司 所有 | 京ICP备09041920号 | 京公网安备110108400531号
发表于 2015-3-3 21:32:53
