HTML5特性 > 本地储存 >HTML5 Web本地存储

在html5中为我们提供了一种本地缓存机制，它将取代我们的cookie，并且它是不会随浏览器发会我们的服务器端的。我们可以采用js在客户端自由的操作本地缓存。html5中缓存主要有localStorage，和sessionStorage。他们的用法一致。区别在于他们的时间限制不同。localStorage是不存在时间限制的。而sessionStorage这时基于session的数据存储，在关闭或者离开网站后，数据将会被删除。

  下面我们来简单看看官方的示例操作：

javascript

localStorage.fresh = “vfresh.org”;   //设置一个键值 
var a = localStorage.fresh;   //获取键值

或者使用它的API： 
javascript

//清空storage 
localStorage.clear();

//设置一个键值 
localStorage.setItem(“fresh”,“vfresh.org”);

//获取一个键值 
localStorage.getItem(“fresh”); 

//return “vfresh.org” //获取指定下标的键的名称（如同Array） 
localStorage.key(0); 

//return “fresh” //删除一个键值 
localStorage.removeItem(“fresh”);

  sessionStorage相同就不用在废话了，他相当于我们的过期时间Expire=0的cookie；

要注意的事项：

1、setItem中的key、value使用的是字符串的形式进行存储的。也就是说如果有如下的代码：setItem(‘price’, 12);

通过getItem(‘price’) + 5 得到的将不是预期的17(整数)，而是’125’(字符串)

2、再次使用setItem设置已经存在的key的value时，新的值将替代旧的值

当存储中的数据发生改变时，会触发相应的事件（但目前各浏览器对此事件的支持并不完善，暂时可以忽略）

Web SQL Database

Web SQL Database采用的是“SQLLite”的文件型数据库，初步应用的话，基本的SQL语句就可以搞定

大体上，要使用本地数据库，有两个必要的步骤：
1、创建访问数据库的对象
2、使用事务处理

一个示例：

JavaScript Code复制内容到剪贴板

1. var db = openDatabase('myData','1.0','test database',1024*1024);  

　　openDatabase()方法含有四个参数，第一个参数为数据库名，第二个参数为版本号，第三个参数为数据库的描述，第四个参数为数据库的大小（1024*1024表示1M大小）

JavaScript Code复制内容到剪贴板

1. db.transaction(function(tx){tx.executeSql('CREATE TABLE IF NOT EXISTS MsgData(name TEXT,msg TEXT,time INTEGER)',[]);})  

　　transaction()方法使用了一个回调函数作为参数，以处理这次事务。

既然是SQL Database，当然少不了SQL语句，执行SQL的主要方法是executeSql()。
executeSql()的完整定义如下：

JavaScript Code复制内容到剪贴板

1. transaction.executeSql(SQLquery,[],dataHandler,errorHandler);  

　　第一个参数是要执行的SQL语句，如如果其中含有未知的参数，用？代替；第二个参数是SQL语句需要用到的参数，即取代第一个参数中的？；第三个参数是查询结果的 处理函数；第四个是错误处理函数；

数据库查询结果的数据集对象有一个rows属性，其中保存了查询到的每条记录，可以用for循环来一次取出里面的数据：

JavaScript Code复制内容到剪贴板

1. for(var i = 0; i < rows.length; i++){  
2.        var temp = rows.item(i);  
3.  }   

　　说明：opera还支持var temp = rows[i]的写法，不过chrome不支持；

下面是一个利用web storage用作计数器的示例和用web SQL database实现的留言板功能,关闭浏览器再打开之后留言依旧还在（由于实现此标准的厂商不多，web SQL database只支持chrome和opera）