Html5 Web database存储和本地数据库操作

浏览数：25 / 时间：2015年06月12日

HTML5储存数据有两种方法：webDatabase(数据库形式) 和 webStorage(cookie形式)

WebStorage(客户端存取数据),也有两种方法:localStorage[持久化的储存方式] 和 sessionStorag(基于session方式的数据储存[会话级别的数据储存方式])

sessionStorage设置和获取数据:

1 设置 :  window.sessionStorage.setItem(‘key‘,‘value‘);
2 
3 获取 :  console.log(window.sessionStorage.getItem(‘key‘));// 输出value

另外一种设置和获取数据的方法:

1 设置:    window.sessionStorage.hello=‘world‘; 
3 获取:    console.log(window.sessionStorage.hello); //输出world

localStorage设置和获取数据:

1 设置: window.localStorage.setItem(‘name‘,‘webStorage‘);
2 获取 : console.log(window.localStorage.getItem(‘name‘)); //输出webStorage

另外一种设置和获取数据的方法:

1 设置:    window.localStorage.hello=‘world‘;
2 获取:    console.log(window.localStorage.hello); //输出world

WebStorage对象的方法和属性:

从接口文件可以看到:

Length属性:获取webstorage对象的键值对数量

console.log(window.sessionStorage.length);

Key(index):获取webstorage对象的索引键

console.log(window.sessionStorage.key(0));

setItem(key,value) :设置一对键值对

getItem(key):根据一个键获取对应的值

removeItem(key):删除对应的键的键值对

window.sessionStorage.removeItem(‘hello‘);

clear();清除全部的键值对.

window.sessionStorage.clear(）

WebStorage事件监测 ( 事件通知机制 ) 监听当数据发生变化的时候所触发的事件.监听同源窗口的事件.

1 Window.addEventListener(‘storage’,storageEvent ,true)
2 function storageEvent(event){
3     console.log(‘key=’+event.key+’oldValue=’+event.oldValue+’newValue=’+event.newValue+’olurl=’+event.url+’storageArea+event.storageArea);
　}

Web Sql数据库创建本地数据库

Html5 数据库 API 是以一个独立规范形式出现的 , 它包括三个独立方法

openDatabase : 使用现有数据库或创建新数据库的方式创建数据库对象

transaction : 允许用户根据情况控制事务提交或回滚

executeSql : 用于执行真实的SQL查询

使用js编写sqlLite数据库有两个步骤:

1 – 创建访问数据库的对象

2 – 使用事务处理

下面是一个简单的再本地创建数据库的一个例子代码

 1 window.onload=function(){
 2             var db=openDatabase(‘dbname‘,‘1.0‘,‘this is a string‘,5*1014*1024);
 3 
 4             if(!db){
 5                 console.log(‘创建数据库失败!‘);
 6             }
 7             
 8             db.transaction(function(obj){
 9             
10             obj.executeSql(‘create table blog (id,name,title)‘);
11             
12             obj.executeSql("insert into blog (id,name,title) values (1,‘php‘,‘my nam e is a php‘)");
13             
14             obj.executeSql("insert into blog (id,name,title) values (2,‘html5‘,‘my nam e is a html5‘)");
15             
16                //var msg=‘‘;
17             
18                console.log(‘表和表数据的创建和插入‘);
19                 
20             });
21 
22 
23             /** get the SqlData **/
24             db.transaction(function(obj){
25                 
26                 obj.executeSql("select * from blog",[],function(obj,result){
27                 
28                     
29                     
30                     var l=result.rows.length,i;//获取数据结果集的行数长度    和定义一个变量 i
31                         
32                     document.querySelector(‘.tab‘).innerHTML=‘表中的结果集中有‘+l+‘行数据‘;
33                     
34                     // item(index)方法是rows对象中的一个属性,index为索引值
35                     for(i=0;i<l;i=i+1){
36                         console.log(result.rows.item(i).name);//ouput php html5
37                     }
38                     
39                 })
40                         
41                     
42             });
43 
44             
45 }