一，开篇分析

Hi，大家好！大熊君又和大家见面了，(*^__^*) 嘻嘻……，这系列文章主要是学习Html5相关的知识点，以学习API知识点为入口，由浅入深的引入实例，

让大家一步一步的体会"h5"能够做什么，以及在实际项目中如何去合理的运用达到使用自如，完美驾驭O(∩_∩)O~，好了，废话不多说，直接进入今天的主题，

今天主要讲的是“WebStorage API”及在客户端浏览器中的作用，并且会引入一个实际的例子做为讲解的原型范例，让我们先来看看“WebStorage API”：

　　

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 = "bigbear" ; 
　　localStorage["author"] = "bigbear" ; 
　　localStorage.setItem("author","bigbear") ; 
　

　三，引入实例

　　今天给大家分享一个留言实时保存的例子。

　　　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();

　

　html如下：

 <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的不同之处在哪。

　　（3），不断重构上面的实例，如何进行合理的重构那？不要设计过度，要游刃有余，推荐的方式是过程化设计与面向对象思想设计相结合。

　　     　　　　　　　　　　　　哈哈哈，本篇结束，未完待续，希望和大家多多交流够沟通，共同进步。。。。。。呼呼呼……(*^__^*)　　　　

大熊君学习html5系列之------WebStorage（客户端轻量级存储方案）的更多相关文章

  1. 大熊君学习html5系列之------requestAnimationFrame（实现动画的另一种方案）

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...

  2. 大熊君学习html5系列之------XHR2（XMLHttpRequest Level 2）

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...

  3. 大熊君学习html5系列之------Online && Offline（在线状态检测）

    一,开篇分析 Hi,大家好,给大家拜个晚年!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例,让大家一步一步的 ...

  4. 大熊君学习html5系列之------History API（SPA单页应用的必备------重构完结版）

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...

  5. 大熊君学习html5系列之------History API（SPA单页应用的必备）

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...

  6. HTML5的五种客户端离线存储方案

    最近折腾HTML5游戏需要离线存储功能,便把目前可用的几种HTML5存储方式研究了下,基于HT for Web写了个综合的实例,分别利用了Cookie.WebStorage.IndexedDB以及Fi ...

  7. HTML5五种客户端离线存储方案

    最近折腾HTML5游戏需要离线存储功能,便把目前可用的几种HTML5存储方式研究了下,基于HT for Web写了个综合的实例,分别利用了Cookie.WebStorage.IndexedDB以及Fi ...

  8. 四种有能力取代Cookies的客户端Web存储方案

    目前在用户的网络浏览器中保存大量数据需要遵循几大现有标准,每一种标准都拥有自己的优势.短板.独特的W3C标准化状态以及浏览器支持级别.但无论如何,这些标准的实际表现都优于广泛存在的cookies机制. ...

  9. Android（java）学习笔记174：SharedPreferences（轻量级存储类）

    1.SharedPreferences是Android平台上一个轻量级的存储类,简单的说就是可以存储一些我们需要的变量信息.2个activity 之间的数据传递除了可以他通过intent来传递数据,还 ...

随机推荐

  1. CentOS RedHat YUM 源扩展补充（32位、64位均有）

    一般情况下强烈建议在CentOS6下面使用YUM配置安装LAMP环境,一些兄弟也很喜欢使用编译的安装方法,个人觉得如果不是对服务器做定制,用yum安装稳定简单,何必去download&make ...

  2. Linux终端打印命令使用介绍

    常用linux打印命令 日常使用中或shell脚本中linux终端打印命令有echo和printf.  echo命令 功能说明:显示文字.语 法:echo [-ne][字符串]或 echo [--he ...

  3. ASP.NET MVC 5 with EF 6 上传文件

        参考   ASP.NET MVC 5 with EF 6 - Working With Files Rename, Resize, Upload Image (ASP.NET MVC) ASP ...

  4. Redis学习总结

    Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API,其实当前最热门的NoSQL数据库之一,NoSQL还包括了Mem ...

  5. Java面向对象 第一章 面向对象开发方法概述

    一.软件开发经历的生命周期: ①软件分析 ②软件设计 ③软件编码 ④ 软件测试 ⑤ 软件部署 ⑥软件维护 二.为了提高软件开发效率,降低软件开发成本,一个优良的软件系统应该具备以下特点: ① 可重用性 ...

  6. IIS7.5使用web.config设置伪静态的二种方法(转)

    近几天公司里开发的项目有几个运行在IIS7.5上,由于全站采用的是伪静态,因此从网上找到两两种方法来实现.这两种方法各有优势:第一种比较灵活,只要把文件拷到根目录下,即可直接显示所有伪静态页面(适用于 ...

  7. C#.NET 大型企业信息化系统集成快速开发平台 4.1 版本 - 如何才能成为全国知名软件组件

    往往我们看到一个好用的工具.就能知道制作这个工具有多少不容易,使用好这个工具也有多少不容易? 通用快速开发框架同样也是经过多年的完善改进才到了今天的稳定成熟度,知名程度,为什么能成为全国有名的软件组件 ...

  8. ASP.NET MVC - 创建Internet 应用程序

    为了学习 ASP.NET MVC,我们将构建一个 Internet 应用程序. 第 1 部分:创建应用程序. 我们将构建什么 我们将构建一个支持添加.编辑.删除和列出数据库存储信息的 Internet ...

  9. C#汉字转拼音(npinyin)将中文转换成拼音全文或首字母

    汉字转拼音貌似一直是C#开发的一个难题,无论什么方案都有一定的bug,之前使用了两种方案. 1.Chinese2Spell.cs 一些不能识别的汉字全部转为Z 2.Microsoft Visual S ...

  10. AngularJS 之 Factory vs Service vs Provider【转】

    英文原文:AngularJS: Factory vs Service vs Provider 当你初试 Angular 时,很自然地就会往 controller 和 scope 里堆满不必要的逻辑.一 ...