html5的一个非常cool的功能，就是web storage，类似于之前的cookie，不过与之不同的是，web storage 拥有本地5兆的容量可以存储，而cookie却只有4K，这是完全不能比的优势。

webstrange又分为：localstorage，sessionstorage和本地数据库。

　　接下来我就来一一介绍：

1 localstorage 

　　localstorage 的使用比较简单，方法有：

localStorage.setItem(key,value);//保存数据

localStorage.getItem(key);//读取数据

localStorage.removeItem(key);//删除单个数据

localStorage.clear();//删除所有数据

key：localStorage.key(index);//得到某个索引的值

　　一个小demo来展示功能：

 (function($){

     $(function(){

         $.fn.getFormParam=function(){

             var serializeObj={};

             var array=this.serializeArray();

             var str=this.serialize();

             $(array).each(function(){

                 if(serializeObj[this.name]){

                     if($.isArray(serializeObj[this.name])){

                         serializeObj[this.name].push(this.value);

                     }else{

                         serializeObj[this.name]=[serializeObj[this.name],this.value];

                     }

                 }else{

                     serializeObj[this.name]=this.value;

                 }

             });

             return serializeObj;

         };

         var storageFile =JSON.parse(window.localStorage.getItem('demo'));

         $.each(storageFile, function(i, val){

             $('#demoForm').find('[name="'+i+'"]').val(val);

         });

         $('#demoForm').find('[type="submit"]').on('click', function(){

             var data = $('#demoForm').getFormParam();

             window.localStorage.setItem('demo', JSON.stringify(data));

             return false;

         });

     });

 })(jQuery)

html 代码：

 <!doctype html>

 <html lang="zh">

 <head>

     <meta charset="UTF-8">

     <script src="jquery-1.10.2.min.js"></script>

     <script src="demo.js"></script>

     <title>Document</title>

 </head>

 <body>

     <form id="demoForm">

         <p><label><span>姓名</span><input name="name"></label></p>

         <p><label><span>年龄</span><input name="age"></label></p>

         <p><label><span>学号</span><input name="number"></label></p>

         <p><label><span>地址</span><input name="address"></label></p>

         <p><label><span>爱好</span><input name="habit"></label></p>

         <p><label><span>其他</span><textarea name="big" id="" cols="30" rows="10"></textarea></label></p>

         <p><input type="submit" value="提交"></p>

     </form>

 </body>

 </html>

这样，一个简单的展示localstorage 的 demo就实现了

2 sessionStorage

sessionStorage用法与localStorage用法相同，不过sessionStorage在浏览器关闭网站时候就会清除，而localStorage会一直保存至浏览器中，二者酌情配合使用。

3 本地数据库

熟悉IOS/Android开发的同学，应该会对SQLite数据库比较熟悉

html5中对数据库的操作比较简单，主要有openDatabase方法和transaction方法

用一个对象db来接收openDatabase创建的访问数据库的对象

 var db = openDatabase(databasename,version,description,size)

其中

databasename:数据库名

version：数据库版本 可不填

desription：数据库描述

size：数据库分配空间大小

transaction方法用一个回调函数作为参数，在函数中执行具体的访问数据库的方法

 db.transaction(function(tx)){

     tx.executeSql(sqlQuery,[value1,value2..],dataHandler,errorHandler)

 });

executeSql方法的四个参数分别是：

  • sqlQuery：需要具体执行的sql语句，create||select||update||delete；
  • [value1,value2..]：sql语句中所有使用到的参数的数组，在executeSql方法中，将sql语句中所要使用的参数先用“?”代替，然后依次将这些参数组成数组放在第二个参数中；
  • dataHandler：执行成功回调函数；
  • errorHandler：执行失败回调函数；

html5本地存储web storage的简单使用的更多相关文章

  1. HTML5 本地存储Web Storage简单了解

    ​HTML5本地存储规范,定义了两个重要的API :Web Storage  和  本地数据库Web SQL Database. 本地存储Web Storage 实际上是HTML4的cookie存储机 ...

  2. HTML5本地存储 Web Storage

    Web Storage基本介绍 HTML5 定义了本地存储规范 Web Storage , 提供了两种存储类型 API  sessionStorage 和 localStorage,二者的差异主要是数 ...

  3. HTML5本地存储——Web SQL Database

    在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数据就 ...

  4. [转]HTML5本地存储——Web SQL Database

    在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数据就 ...

  5. HTML5本地存储(Local Storage) 的前世今生

    长久以来本地存储能力一直是桌面应用区别于Web应用的一个主要优势.对于桌面应用(或者原生应用),操作系统一般都提供了一个抽象层用来帮助应用程序保存其本地数据 例如(用户配置信息或者运行时状态等). 常 ...

  6. HTML5本地存储——Web SQL Database与indexedDB

    虽然在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数 ...

  7. 本地存储 web storage

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. html5本地存储 local storage

    HTML5 web storage, a better local storage than cookies. With HTML5, web pages can store data locally ...

  9. HTML5 Web存储(Web Storage)技术及用法

    在如今的Web开发中,HTML5是大家讨论的最大一个话题.HTML5提供的新功能特征使得Web程序员如虎添翼,并免去了以往钻研各种方法来让网站更好.更快.更灵活的气力.这些新功能中有一个非常让我感兴趣 ...

随机推荐

  1. 图文-水平垂直居中兼容ie6+

    图文-水平垂直居中兼容ie6+ 具体代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...

  2. 关于String s = new String("xyz"); 创建几个对象的问题

    引用自这位朋友:http://blog.sina.com.cn/s/blog_6a6b14100100zn6r.html 你知道在java中除了8中基本类型外,其他的都是类对象以及其引用.所以 &qu ...

  3. AngularJS 父子控制器

    <!doctype html> <html ng-app="myApp"> <head> <script src="C:\\Us ...

  4. Jasper_crosstab_columngroup header position config - (headerPosition="Stretch")

    Position of Totals RowThe totalPosition attribute controls the appearance of the row that displays t ...

  5. WordPress插件开发记录

    1.a标签在新的网页中打开内容     <a href="网址" target="_blank"></a>      2.PDO的$re ...

  6. CoreData (三)备

    NSFetchedResultsController 什么是NSFetchedResultsController NSFetchedResultsController是一个让人爱恨交加的一个类.如果使 ...

  7. 常用IC封装技术介绍

    1.BGA(ball grid array)球形触点陈列,表面贴装型封装之一.在印刷基板的背面按陈列方式制作出球形凸点用 以 代替引脚,在印刷基板的正面装配LSI 芯片,然后用模压树脂或灌封方法进行密 ...

  8. 《Programming WPF》翻译 第8章 6.我们进行到哪里了？

    原文:<Programming WPF>翻译 第8章 6.我们进行到哪里了? 动画可以增强应用程序的交互感.它有利于更平滑的转换--当条目出现或消失的时候.它应该,当然,被用于体验和重新着 ...

  9. bzoj1752 [Usaco2005 qua]Til the Cows Come Home

    Description Bessie is out in the field and wants to get back to the barn to get as much sleep as pos ...

  10. hdu 1011 Starship Troopers_树状dp

    题目链接 题意:给你一棵树(必须从根节点出发),每个节点上都有bug和value,你有m个骑士,每个骑士能消灭20个bug,你必须消灭该节点的全部bug才能拿到该节点的value,问最多能拿到valu ...