珠峰培训javascript技术与前端技术论坛

 找回密码
 立即注册
查看: 1799|回复: 0

闲聊HTML5-----WebStorage

[复制链接]

23

主题

44

帖子

151

积分

注册会员

Rank: 2

积分
151
发表于 2015-3-3 21:32:53 | 显示全部楼层 |阅读模式
本帖最后由 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
  一个小的功能需求:记录用户每次访问页面的次数
  1. $(function(){
  2.     if(!_isSupportWebStorage()){
  3.         throw new Error("Not Support WebStorage APIs !") ;
  4.     }
  5.     _storePageCount() ;
  6.     alert(_loadPageCount())
  7.    
  8. }) ;
  9. function _storePageCount(){
  10.     var storage = window.localStorage ;
  11.     var pageLoadCount = storage.getItem("pageLoadCount") ;
  12.     var stepOfCount = 1 ;
  13.     if(!pageLoadCount){
  14.         storage.setItem("pageLoadCount",stepOfCount) ;   
  15.     }
  16.     else{
  17.         storage.setItem("pageLoadCount",parseInt(pageLoadCount) + stepOfCount) ;
  18.     }
  19. } ;
  20. function _loadPageCount(){
  21.     var storage = window.localStorage ;
  22.     return storage.getItem("pageLoadCount") ;
  23. } ;
  24. function _isSupportWebStorage(){
  25.     return !!window.localStorage ;
  26. } ;
复制代码

运行效果:
  每次刷新页面时打印出访问量的次数
    
跟踪本地数据情况:
    
这时数据已经持久化到本地的硬盘上了
"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代码如下:
  1. function upInfo() {
  2.     var lStorage = window.localStorage;
  3.     var show = window.document.getElementById("show");
  4.     if (window.localStorage.myBoard) {
  5.         show.value = window.localStorage.myBoard;
  6.     } else {
  7.         var info = "还没有留言";
  8.         show.value = "还没有留言";
  9.     }
  10. }
  11. function addInfo() {
  12.     var info = window.document.getElementById("t1");
  13.     var lStorage = window.localStorage;
  14.     if (lStorage.myBoard) {
  15.         var date = new Date();
  16.         lStorage.myBoard += t1.value + "\n发表时间:" + date.toLocaleString() + "\n";
  17.     } else {
  18.         var date = new Date();
  19.         lStorage.myBoard = t1.value + "\n发表时间:" + date.toLocaleString() + "\n";
  20.     }
  21.     upInfo();
  22. }
  23. function cleanInfo() {
  24.     window.localStorage.removeItem("myBoard");
  25.     upInfo();
  26. }
  27. upInfo();
复制代码
  1. <body>
  2.   <div>
  3.    <h2>简单的web存储留言板</h2>
  4.    <textarea id="t1"></textarea>
  5.    <br />
  6.    <input type="button" onclick="addInfo()" value="留言" />
  7.    <input type="button" onclick="cleanInfo()" value="清除留言" />
  8.    <br />
  9.    <hr />
  10.    <label id="shows"></label>
  11.    <textarea id="show" readonly="readonly"></textarea>
  12.   </div>
  13. </body>
复制代码

大家可以把代码弄下来看看,并不断重构上面的实例,推荐的方式是过程化设计与面向对象思想设计相结合。
最后总结
  (1)理解WebStorage Api的使用方式以及具体实例中使用的目的是为了解决哪些问题。
  (2   两个核心Api的不同之处在哪。



本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|珠峰培训--JavaScript培训

GMT+8, 2017-10-23 19:35 , Processed in 0.128996 second(s), 22 queries .

Powered by Discuz! X3.1

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表