html5 浏览器数据库,html5 浏览器端数据库

为什么使用浏览器端数据库：随着浏览器的处理能力不断增强，越来越多的网站开始考虑，将大量数据储存在客户端，这样可以减少用户等待从服务器获取数据的时间。

一、localStorage  — 本地存储  可以长期存储数据，没有时间限制。

可以存储 ：数组、json数据、图片、脚本、样式文件

function test(){

if(window.localStorage){//判断浏览器是否支持 localStorage

var ls=window.localStorage;

ls.setItem("name","张三");//设置值

var name= ls.getItem("name");//取值

ls.removeItem("name");//删除数据

}else{

alert('浏览器不支持 localStorage');

}

}

存在的局限性: 子域名之间不能共享存储数据；超出存储范围后可以使用 LRU、FIFO 技术处理；

二、sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。

三、IndexedDB

1、使用IndexedDB的原因

现有的浏览器端数据储存方案，都不适合储存大量数据：cookie不超过4KB，且每次请求都会发送回服务器端；Window.name属性缺乏安全性，

且没有统一的标准；localStorage在2.5MB到10MB之间(各家浏览器不同)。所以，需要一种新的   解  决方案，这就是IndexedDB诞生的背景。

2、什么是IndexedDB

通俗地说，IndexedDB就是浏览器端数据库，可以被网页脚本程序创建和操作。它允许储存大量数据，提供查找接口，还能建立索引。

这些都是localStorage所不具备的。就数据库类型而言，IndexedDB不属于关系型数据库(不支持SQL查询语   句)，更接近NoSQL数据库。

3、IndexedDB的特点。

(1)      键值对储存。 IndexedDB内部采用对象仓库(object store)存放数据。所有类型的数据都可以直接存入，包括JavaScript对象。在对象仓库中，

数据以“键值对”的形式保存，每一个数据都有对应的键名，键名是独一无二的，不能有重复，否则会抛出一个错误。

(2)异步。 IndexedDB操作时不会锁死浏览器，用户依然可以进行其他操作，这与localStorage形成对比，后者的操作是同步的。异步设计是为了防止大量数据的读写，拖慢网页的表现。

(3)支持事务。 IndexedDB支持事务(transaction)，这意味着一系列操作步骤之中，只要有一步失败，整个事务就都取消，数据库回到事务发生之前的状态，不存在只改写一部分数据的情况。

(4)同域限制 IndexedDB也受到同域限制，每一个数据库对应创建该数据库的域名。来自不同域名的网页，只能访问自身域名下的数据库，而不能访问其他域名下的数据库。

(5)储存空间大 IndexedDB的储存空间比localStorage大得多，一般来说不少于250MB。IE的储存上限是250MB，Chrome和Opera是剩余空间的某个百分比，Firefox则没有上限。

(6)支持二进制储存。 IndexedDB不仅可以储存字符串，还可以储存二进制数据。

目前，Chrome 27+、Firefox 21+、Opera 15+和IE 10+支持这个API，但是Safari完全不支持。

4、使用

a. 判断浏览器是否支持Indexed DB

function detectionIndexedDB(){

window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;

if(!window.indexedDB)

{

console.log("你的浏览器不支持IndexedDB");

return false;

}

console.log("你的浏览器支持IndexedDB");

return true;

}

View Code

b.创建/打开数据库

function openDB (myDB) {

var version=version || 1;

var request=window.indexedDB.open(myDB.name,myDB.version);

request.οnerrοr=function(e){//请求失败的回调函数句柄

console.log(e.currentTarget.error.message);

};

request.onsuccess=function(e){//请求成功的回调函数句柄

myDB.db=e.target.result;

};

request.onupgradeneeded=function(e){//请求数据库版本变化句柄

var db=e.target.result;

if(!db.objectStoreNames.contains('students')){//初始化objectstore(表)以供后面使用

db.createObjectStore('students',{autoIncrement:true});//主键

}

console.log('DB version changed to '+myDB.version);

};

}

View Code

c.关闭数据库

function closeDB(db){

db.close();

}

View Code

d. 对数据的操作

事务 在对新数据库做任何事情之前，需要开始一个事务。事务中需要指定该事务跨越哪些object store。

事务具有三种模式

只读：read，不能修改数据库数据，可以并发执行

读写：readwrite，可以进行读写操作

版本变更：verionchange

d1.添加数据

function addData(db,tableName,datas){

var transaction=db.transaction(tableName,'readwrite');

var store=transaction.objectStore(tableName);

store.add(datas);

}

View Code

d2. 通过键获取数据

//通过键获取数据

function getDataByKey(db,tableName,value){

var transaction=db.transaction(tableName,'readwrite');

var store=transaction.objectStore(tableName);

var request=store.get(value);

request.onsuccess=function(e){

var student=e.target.result;

console.log(student.name);

};

}

View Code

d3.读取集合

//读取集合

function dataList(db,tableName){

var transaction=db.transaction(tableName,'readwrite');

var objectStore = transaction.objectStore(tableName);

var cursor = objectStore.openCursor();

cursor.onsuccess = function(e) {

var result = e.target.result;

if(result){

console.log("Key", result.key,"value",result.value);

result.continue();

}

}

}

View Code

d4. 更新数据

function updateDataByKey(db,storeName,value){

var transaction=db.transaction(storeName,'readwrite');

var store=transaction.objectStore(storeName);

var request=store.get(value);

request.onsuccess=function(e){

var student=e.target.result;

student.age=35;

store.put(student);

};

}

View Code

d5.删除数据

function deleteDataByKey(db,storeName,value){

var transaction=db.transaction(storeName,'readwrite');

var store=transaction.objectStore(storeName);

store.delete(value);

}

View Code

d6.清空数据

//调用object store的clear方法可以清空object store

function clearObjectStore(db,storeName){

var transaction=db.transaction(storeName,'readwrite');

var store=transaction.objectStore(storeName);

store.clear();

}

View Code