一，开篇分析

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. Win Server 2008 RD案例：Client通过Server的浏览器上网

    一.简介 RD是Windows Server远程桌面服务,可以实现从客户端运行服务器上的软件.首先在Server安装软件,设置能远程访问的应用和账号,并且创建.rdp快捷方式文件,然后Client打开 ...

  2. netty4虚拟内存不断飙升

    去年升级过一个老的netty3的程序到netty4,近期突然注意到一个问题,就是这个程序随着时间虚拟内存会不断升高.之前升级的时候担心存在内存泄露,所以还特意用jstate跟踪过gc回收的情况,并没有 ...

  3. 使用WinRar软件制作程序安装包

    之前我写过使用好压软件打包程序,见随笔: 使用好压(HaoZip)软件打包EverEdit制作安装程序 - Fetty - 博客园http://www.cnblogs.com/fetty/p/4907 ...

  4. J2EE基础之Web服务简介

    J2EE基础之Web服务简介 1.什么是Web服务? 在人们的日常生活中,经常会查询网页上某城市的天气信息,这些信息都是动态的.实时的,它是专业的气象站提供的一种服务.例如,在网上购物时,通常采用网上 ...

  5. 多个同class的input判断不能为空

    var flag=true; var n=($(".date_inp").length); var flag = true; for (var i = 0; i < n; i ...

  6. TCP的连接控制

    TCP的三次握手 所谓三次握手(Three-way Handshake),是指建立一个TCP连接时,需要客户端和服务器总共发送3个包. 确认号ack:期待收到对方下一个报文段的第一个数据字节的序号. ...

  7. Nginx负载均衡实践之一：基本实现

    由于现在的网站架构越来越大,基于互联网的用户也是日渐增长,所以传统的单机版服务器已经渐渐不能适应时代发展的需要.最近在和其他企业接触的过程中,发现对于互联网的经验尤为看重,所谓的互联网经验,其实就是指 ...

  8. mysql导入导出.csv格式数据

    window下导入数据: LOAD DATA INFILE "C:\\1.csv" REPLACE INTO TABLE demo CHARACTER SET gb2312 FIE ...

  9. HTTPS 原理解析

    一 前言 在说HTTPS之前先说说什么是HTTP,HTTP就是我们平时浏览网页时候使用的一种协议.HTTP协议传输的数据都是未加密的,也就是明文的,因此使用HTTP协议传输隐私信息非常不安全.为了保证 ...

  10. System.Diagnostics.Process 启动进程资源或调用外部的命令的使用

    经常看到一些程序在保存为一个txt,或者excel的文件的时候,保存完毕立即打开, 启动程序或打开文件的代码 System.Diagnostics.Process.Start(System.IO.Pa ...