为什么使用浏览器端数据库：随着浏览器的处理能力不断增强，越来越多的网站开始考虑，将大量数据储存在客户端，这样可以减少用户等待从服务器获取数据的时间。
一、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;
}
b.创建/打开数据库
function openDB (myDB) {
var version=version || 1;
var request=window.indexedDB.open(myDB.name,myDB.version);
request.onerror=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);
};
}
c.关闭数据库
function closeDB(db){
db.close();
}
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);
}
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);
};
}
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();
}
}
}
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);
};
}
d5.删除数据
function deleteDataByKey(db,storeName,value){
var transaction=db.transaction(storeName,'readwrite');
var store=transaction.objectStore(storeName);
store.delete(value);
}
d6.清空数据
//调用object store的clear方法可以清空object store
function clearObjectStore(db,storeName){
var transaction=db.transaction(storeName,'readwrite');
var store=transaction.objectStore(storeName);
store.clear();
}