浅谈：HTML5中数据存储的方式：

HTML5中数据存储的方式：

1.storage

2.webSQL（数据库）

3.IndexedDB（数据库操作）

storage:

两个方法：

setltem(key,value);

getitem(key);

1.sessionStorage：只在不关闭浏览器的情况下，数据有效，

只要关闭掉浏览器就会，清除保存的数据；

2.localStorage：只要不清除缓存，保存到浏览器的数据，一直存在；

IndexedDB是一个NOSQL,都是以对象的方式去存储；

indexedDB的基本操作：

1. 打开数据库并且开始一个事务。（事务：一个平台）
2. 创建一个 object store。
3. 构建一个请求来执行一些数据库操作，像增加或提取数据等。
4. 通过监听正确类型的 DOM 事件以等待操作完成。
5. 在操作结果上进行一些操作（可以在 request 对象中找到）

使用流程(1.打开数据库 2.建表 3.增删改查)

1.判断浏览器是不是支持 indexedDB

indexedDB?alert("支持"):alert("不支持");

2.打开数据库

// 打开/创建数据库var request = window.indexedDB.open("MyTestDatabase");

indexedDB.open("MyTestDatabase"); ->   IDBOpenDBRequest  

  IDBOpenDBRequest  ：

监听事件：生成处理函数

①request. onerror = function(event) { // Do something with request.errorCode!};

创建或者打开数 据库失 败的时候，调用

②request. onsuccess = function(event) { // Do something with request.result!};

创建或者打开数据库成功的时候，调用

③该事件仅在较新的浏览器中被实现request. onupgradeneeded = function(event) {

// 更新对象存储空间和索引 .... };

只在数据库的版本号，更新的时候调用

3.创建类似于BMOB里面的某个表（也可以想象为是一个数据模型）

通过ObjectStorage进行操作（增删改查建表）

①.建表（创建类）：使用数据库的对象

.createObjectStore("名字",设置唯一字段(设置这个类里面可以找到某一个对象的属性));

②.创建字段（给创建的类，添加属性）ObjectStore的对象 .createIndex("属性名");

4.增删改查的操作

objactStore.add():

objactStore.delete():

objactStore.put();

objactStore.get();

代码示例：

1.打开数据库：

(function () {

//创建、打开数据库(database)

function openDB() {

var request = indexedDB.open("noteDB",1);

request.onerror = function (error) {

console.log(error);

};

request.onsuccess = function () {

console.log("打开数据库成功");

};

//只在数据库版本号两次不一致的情况下，调用

request.onupgradeneeded = function () {

//在建表的时候，不需要每次都去创建，

//可以在数据库更新版本号再创建

console.log("更新数据库成功",this);

};

}

//浏览器是不是支持

function init() {

if(!indexedDB){

return;

}

}

openDB();

})();

2.建表

从没有数据库到有数据库、数据库的版本号更新的时候，再去建表。

查询数据库中是不是存在同样的表，如果存在，不创建；

onupgradeneeded 可以监听数据库版本号的变更；

可以通过  IDBDatabase 里面的 objectStoreNames 查看数据库里面都创建了哪些表名

var objectStore = db.createObjectStore(tableName);

//创建表里面的字段（列）

//创建字段的时候，需要至少传入两个参数

//1.字段的名字2.可以通过哪个名字，查找到这个字段对应的内容；

objectStore.createIndex("title","title");

objectStore.createIndex("content","content");

objectStore.createIndex("date","date");

3.增删改查的操作

①.db -> transaction() -> 获得事务的对象

②.事物的对象 -> objectStore

③.objectStore -> 增删改查

//添加数据function addData(info) {

    //获得到事务的对象    var transaction = database.transaction(["note"],"readwrite");

    //存放某一种类型数据的容器（类似类）    var objectStore = transaction.objectStore("note");

//    执行增删改查的操作    return objectStore.add(info);}

查询操作

get（）；

getAll（）；

function searchAll() {

return database.transaction(["note"],"readonly").objectStore("note").getAll();

}

会得到一个IDBRequest对象， 可以通过监听成功事件， 获得到查询到的数据

request.onsuccess = function () {

console.log("打开数据库成功");

database = this.result;

searchAll().onsuccess = function () {

console.log(this.result);

};

};

如果查询单个key对应的数据可以通过get（key）查询

database.transaction(["note"],"readonly").objectStore("note").get(1502242969880).onsuccess=function() {

console.log(this);

};

删除数据database.transaction(["note"],"readwrite").objectStore("note").delete(1502242969880).onsuccess=function() {

console.log(this);

};

更新数据

database.transaction(["note"],"readwrite").objectStore("note").put({title:"更新数据",content:"更新数据",date:1502183031380}).onsuccess=

function() {

console.log(this);

};

需要注意的事项

任何数据库的操作，更新字段、表，需要先清除原来的数据

如果是查找、删除、修改具体的内容的时候。需要根据一个唯一值查找