首页 > 代码库 > Html5 Web database存储和本地数据库操作

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

2024-07-23 08:22:05   222人阅读

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=http://www.mamicode.com/’+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;//获取数据结果集的行数长度    和定义一个变量 i31                         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 html537                     }38                     39                 })40                         41                     42             });43 44             45 }

 

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


联系
我们