1、HTML5添加的storage
它分为两个:
一个是sessionStorage :
session是一种会话,只能在本页面访问。关闭页面此对象清除
方法:
setItem(name,val) getItem(name) 无值时返回null removeItem(name) clear() <br />
属性:
sessionStorage.name //获取或设置指定属性的值 如无此属性会返回undefined<br />
也可用sessionStorage[name]组合的方式获取或设置值<br />
sessionStorage.length 获取属性的个数<br />
得到某个索引的key:localStorage.key( index );
sessionStorage.key( index );
二个是localStorage
此对象是本地存储,再打开也不会清除
它的方法和属性和sessionStorage一样
sessionStorage 可以用来即时存储数据,如临时聊天的内容
localStorage 可以当做本地小型数据库来用把值存储成对象json
2、indexedDB
indexedDB是HTML5-WebStorage的重要一环,是一种轻量级NOSQL数据库。相比web sql(sqlite)更加高效,包括索引、
事务处理和健壮的查询功能。indexedDB特点:
一个网站可能有一个或多个 IndexedDB 数据库,每个数据库必须具有惟一的名称。
一个数据库可包含一个或多个对象存储。一个对象存储(由一个名称惟一标识)是一个记录集合。每个记录有一个键 和一个值。该值是一个对象,可拥有一个或多个属性。键可能基于某个键生成器,从一个键路径衍生出来,或者是显式设置。一个键生成器自动生成惟一的连续正整数。键路径定义了键值的路径。它可以是单个 JavaScript 标识符或多个由句点分隔的标识符。(有点像列数据库的特点)
IndexedDB中,几乎所有的操作都是采用了command->request->result的方式。比如查询一条记录,返回一个request,在request的result中得到查询结果。又比如打开数据库,返回一个request,在request的result中得到返回的数据库引用。
indexedDB需要放到web服务器上才可以运行。
<input type="text" id="name" placeholder="name">
<input type="text" id="age" placeholder="age" />
<button id="but_1">添加</button><br />
<input type="text" id="select">
<button id="but_2">id查找</button>
<button id="but_3">all</button>
<button id="but_4">name 查找</button>
<button id="but_5">游标范围</button>
<div id="list"></div>
<script>
var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
var openRequest;
var db;
function init(){
//返回IDBOpenDBRequest对象
openRequest=indexedDB.open('testdb',3);//创建或打开数据库(name,version)
openRequest.οnerrοr=function(err){
console.log(err);
}
//第一次打开页面初始化数据库时会被调用,或在当有版本号变化时
openRequest.onupgradeneeded=function(e){
db = e.target.result;
//有person 时删除它
if(db.objectStoreNames.contains('person')){
db.deleteObjectStore('person')
}
//判断是否有此objectsotre
if(!db.objectStoreNames.contains("person")){
console.log("create person objectstore");
//创建store
var objectStore = db.createObjectStore("person", {
keyPath: "id",//主键名称id
autoIncrement:true
});
//创建索引 索引名称 字段名 配置
//unique 是否惟一索引 此字段的值不能重复 一般用于tel email设为唯一 的
objectStore.createIndex("name", "name", { unique: false });
}
}
openRequest.onsuccess=function(e){
db=e.target.result;
//判断是否有store
if(db.objectStoreNames.contains("person")) {
//创建事务指定store和权限
//在indexedDB里任何的存取对象的操作都需要放在事务里执行。
//readonly 只读 readwrite 写读
var t=db.transaction(["person"],"readwrite");
t.οnerrοr=function(e){
console.log(e);
}
t.oncomplete=function(e){
console.log('事务成功')
}
//获取事务中指定store来操作
var os=t.objectStore('person');
//os.clear() 可以清除所有数据
//.add({})添加记录
//os.add({name:'wangyuan',age:22})
//os.delete(1) 删除记录,根据id
//get(id) 根据id获取记录
var request=os.get(2);
request.onsuccess=function(e){
//可用e.target.result获取记录对象 或request.result
console.log(e.target.result)
/*
* 获取的记录对象可以修改后用os.put()来修改
*/
//e.target.result.age=26;
//os.put(e.target.result);
}
}
}
}
/*但indexedDB中没有表的概念,而是objectStore,一个数据库中可以包含多个
objectStore,objectStore是一个灵活的数据结构,可以存放多种类型数据。
也就是说一个objectStore相当于一张表,里面存储的每条数据和一个键相关联。*/
document.querySelector('#but_1').οnclick=function(){
var name=document.querySelector('#name').value;
var age=document.querySelector('#age').value;
var s=db.transaction(["person"],"readwrite").objectStore('person');
s.add({name:name,age:age})
}
document.querySelector('#but_2').οnclick=function(){
var id=document.querySelector('#select').value;
var s=db.transaction(["person"],"readwrite").objectStore('person');
//get 时参数需要数字
s.get(Number(id)).onsuccess=function(e){
console.log(e.target.result)
}
}
document.querySelector('#but_3').οnclick=function(){
var id=document.querySelector('#select').value;
var s=db.transaction(["person"],"readwrite").objectStore('person');
//创建游标
var request=s.openCursor();
var txt='';
request.onsuccess=function(e){
var cur=e.target.result;
if(cur){
txt+=JSON.stringify(cur.value)+'<br/>'
cur.continue();
}
document.querySelector('#list').innerHTML=txt;
}
}
document.querySelector('#but_4').οnclick=function(){
var id=document.querySelector('#select').value;
var s=db.transaction(['person']).objectStore('person');
//index()指定索引名
var request=s.index('name');
//get 查找 name属性为star的记录,只有name==star时才返回记录
//name不是唯一索引时会匹配第一条记录
request.get('star').onsuccess=function(e){
console.log(e.target.result);
}
//使用游标,参数是only
//name 索引查找name==star的符合条件的都可获取到
//only 只获取指定值的数据
request.openCursor(IDBKeyRange.only('star')).onsuccess=function(e){
var cur=e.target.result;
if(cur){
console.log(JSON.stringify(cur.value));
cur.continue();
}
}
}
document.querySelector('#but_5').οnclick=function(){
var id=document.querySelector('#select').value;
var s=db.transaction(['person']).objectStore('person');
//index()指定索引名
var request=s.index('name');
//lowerbound(val,bool) 获取最小是val的数据,也就是大于val的数据
//bool表示是否排除val本身,true排除,false不不排除
//upperBound(val,bool) 获取最大是val的数据,也就是小于val的数据
//bound(val1,val2,bool1,bool2) 获取大小val1 小于val2的数据
request.openCursor(IDBKeyRange.lowerBound('w',true)).onsuccess=function(e){
var cur=e.target.result;
if(cur){
console.log(JSON.stringify(cur.value));
cur.continue();
}
}
}
window.addEventListener("DOMContentLoaded", init, false);
3、web sql database
html5引入Web SQL Database概念,它使用 SQL 来操纵客户端数据库的 API,
这些 API 是异步的,规范中使用的方言是SQLlite
w3c规范已经停止了,但浏览器都已经支持了
<script>
//创建数据库 name version 描述 size callback
var db=openDatabase('testdb',1,'desc',2*1024*1024,function(e){
console.log(e);
})
init();
//transaction方法用以处理事务,当一条语句执行失败的时候,整个事务回滚。方法有三个参数
function init(){
db.transaction(function(context){
//创建表
//sql,参数数据,sql里用?表示参数,成功回调,失败回调
context.executeSql('CREATE TABLE IF NOT EXISTS usertable(id unique,name,age)',[],function(){
console.log('success')
},function(err){
console.log(err)
});
context.executeSql('insert into usertable (id,name,age) values (2,"star",23)')
})
db.transaction(function(ct){
//查询数据
ct.executeSql('select * from usertable where id>0',[],function(ct,results){
console.log(results.rows.length)
for(var i=0;i<results.rows.length;i++){
console.log(results.rows[i])
}
})
})
}
</script>