一，开篇分析

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. 关于Web报表FineReport打印的开发应用案例

    报表打印是报表使用和开发过程中经常碰到的问题,这里汇总了关于Web报表开发打印功能的一些典型应用案例,以应用最广泛的FineReport为例. 案例一:java直接调用报表打印 当java后台定义定时 ...

  2. AngularJS笔记---作用域和控制器

    什么是作用域. 什么是控制器, 作用域包含了渲染视图时所需的功能和数据,它是所有视图的唯一源头.可以将作用域理解成试图模型(ViewModel). 作用域之间可以是包含关系也可以是独立关系.可以通过设 ...

  3. 尽量不要用ad,adv···,advertisement 这些关键词命名

    html dom,文件夹名称,文件名称·······,都尽量不用ad,adv···,advertisement  这些关键词! 为嘛呢? 因为会被浏览器的广告插件自动给屏蔽掉. 我的网站中有一个广告管 ...

  4. Spring远程调用技术<2>-Hessian和Burlap

    上篇谈到RMI技术,加上Spring的封装,用起来很方便,但也有一些限制 这里的Hessian和Burlap解决了上篇提到的限制,因为他们是基于http的轻量级远程服务. Hessian,和RMI一样 ...

  5. 第二天----列表、元组、字符串、算数运算、字典、while

    列表 列表是最常用的Python数据类型,它可以作为一个方括号内的逗号分隔值出现. 基本操作: 索引切片追加删除长度切片循环包含 创建.查看列表: 列表中的数字不要加引号,列表的索引从0开始: lis ...

  6. C#.NET 大型企业信息化系统集成快速开发平台 4.2 版本 - 实现缓存预热

    因为大型应用系统可能有几十个子系统,为了减轻数据库频繁读写压力.提高系统的运行速度.反映速度,大型应用系统都需要采用缓存机制提高运行效率.Redis 缓存预热实现将来大家很多基础数据都可以缓存获取,不 ...

  7. 如何使用eclipse打开已有工程

    在开始使用Eclipse的时候,会发现一个问题,那就是如何打开一个现有的Eclipse工程,开始在菜单中找了好久也没找到. 其实,Eclipse生成的结果不像VC,Jcreator那样可以直接打开,若 ...

  8. web前端开发最佳实践笔记

    一.文章开篇 由于最近也比较忙,一方面是忙着公司的事情,另外一方面也是忙着看书和学习,所以没有时间来和大家一起分享知识,现在好了,终于回归博客园的大家庭了,今天我打算来分享一下关于<web前端开 ...

  9. 修改AssemblyInfo.cs自动生成版本号

    一. 版本号自动生成方法 1.把 AssemblyInfo.cs文件中的[assembly:AssemblyVersion("1.0.0.0")]改成[assembly:Assem ...

  10. 使用Extjs组件实现Top-Left-Main布局并且增加事件响应

    每次在毕业答辩会上,看到同专业的同学只要是XXX管理系统,就是下图所示的界面,看来这中布局还是很受欢迎的(偷笑).接下来进入我们正题,在web项目无论是前端还是后台管理比较常见的布局就是Top-Lef ...