一，开篇分析

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. Ubuntu搭建Ruby On Rail环境

    受不了Ruby在Windows上的执行等待,转战至ubuntu linux下使用,为方便不同版本ruby的使用,采用了rvm安装Ruby on rails环境. 安装rvm //获取认证 gpg -- ...

  2. Ubuntu安装Maven3

    先增加Maven3的源,在/etc/apt/sources.list中添加以下信息 deb http://ppa.launchpad.net/natecarlson/maven3/ubuntu pre ...

  3. 迅为-iMX6开发板 飞思卡尔iMX6Q开发板 工业级开发板

    了解详情请点击迅为官网:http://topeetboard.com 迅为-i.MX6开发板是采用Freescale Cortex-A9 四核i.MX6Q处理器,主频1GHz,2G DDR3内存,16 ...

  4. 使用FileZilla等软件搭建ftp服务器

    FTP的全称是File Transfer Protocol(文件传输协议).顾名思义,就是专门用来传输文件的协议. FTP服务器,则是在互联网上提供存储空间的计算机,它们依照FTP协议提供服务.简单地 ...

  5. Confluence Wiki -- 页面限制

    Confluence Wiki 中 [页面设置] 应该如何理解? 当一个用户有这个权限后,这个用户可以对一个页面做限制,可以限制这个页面不能被其他用户浏览或编辑: 反之,如果没有这个权限,那么这个用户 ...

  6. usb驱动开发之大结局

    从usb总线的那个match函数usb_device_match()开始到现在,遇到了设备,遇到了设备驱动,遇到了接口,也遇到了接口驱动,期间还多次遇到usb_device_match(),又多次与它 ...

  7. 五种方法让CSS实现垂直居中

    利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 使用 CSS 实现垂直居中并不容易.有些方法在一些浏览器 ...

  8. C#基础系列——小话泛型

    前言:前面两章介绍了C#的两个常用技术:C#基础系列——反射笔记 和 C#基础系列——Attribute特性使用 .这一章来总结下C#泛型技术的使用.据博主的使用经历,觉得泛型也是为了重用而生的,并且 ...

  9. C#进阶系列——MEF实现设计上的“松耦合”（一）

    前言:最近去了趟外地出差,介绍推广小组开发的框架类产品.推广对象是本部门在项目上面的同事——1到2年工作经验的初级程序员.在给他们介绍框架时发现很多框架设计层面的知识他们都没有接触过,甚至没听说过,这 ...

  10. windows服务 定时任务

    1.c#程序做成windows服务 若用cmd安装: var path = Process.GetCurrentProcess().MainModule.FileName + " s&quo ...