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

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

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

sessionStorage设置和获取数据:

设置 :  window.sessionStorage.setItem('key','value');

获取 :  console.log(window.sessionStorage.getItem('key'));// 输出value

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

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

   

localStorage设置和获取数据:

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

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

设置:    window.localStorage.hello='world';
获取:    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事件监测 ( 事件通知机制 )   监听当数据发生变化的时候所触发的事件.监听同源窗口的事件.

Window.addEventListener(‘storage’,storageEvent ,true)
function storageEvent(event){
    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 – 使用事务处理 

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

window.onload=function(){
            var db=openDatabase('dbname','1.0','this is a string',5*1014*1024);

            if(!db){
                console.log('创建数据库失败!');
            }
            
            db.transaction(function(obj){
            
            obj.executeSql('create table blog (id,name,title)');
            
            obj.executeSql("insert into blog (id,name,title) values (1,'php','my nam e is a php')");
            
            obj.executeSql("insert into blog (id,name,title) values (2,'html5','my nam e is a html5')");
            
               //var msg='';
            
               console.log('表和表数据的创建和插入');
                
            });


            /** get the SqlData **/
            db.transaction(function(obj){
                
                obj.executeSql("select * from blog",[],function(obj,result){
                
                    
                    
                    var l=result.rows.length,i;//获取数据结果集的行数长度    和定义一个变量 i
                        
                    document.querySelector('.tab').innerHTML='表中的结果集中有'+l+'行数据';
                    
                    // item(index)方法是rows对象中的一个属性,index为索引值
                    for(i=0;i<l;i=i+1){
                        console.log(result.rows.item(i).name);//ouput php html5
                    }
                    
                })
                        
                    
            });

            
}