应用缓存 indexedDB

使用应用缓存的两个步骤：
1.创建应用缓存的文件

2.在html中引用应用缓存的文件

<link rel="icon" href="icon.png"/>

设置图标应用缓存的详细使用:
1. 需要在服务端配制应用缓存文件
2. 在客户端断网的时候保存一个版本当来网的时候更新应用缓存的文件可以通过applicationCache监听 应用缓存失效的状态，如果失效更新页面

indexedDB可以做什么？
可以配合应用缓存做离线应用也可以在没网的情况下阅览近期浏览过的新闻 indexedDB是一个nosql ,都是以对象的方式区存储
indexedDB的基本操作:
1.打开数据库并且开始一个事务。（事务 一个平台演员的舞台是一个可以提供表演的地方）
2.创建一个object store。
3. 构建一个请求来执行一些数据库操作，像增加或提取数据等。
4. 通过监听正确类型的DOM 事件以等待操作完成。
5. 在操作结果上进行一些操作（可以在request 对象中找到）查看IndexedDB中 存储的数据

使用流程：
1. 判断浏览器 是不是 支持 indexedDB
indexedDB?alert(“支持indexedDB”):alert(“不支持indexedDB”);
2.打开/创建数据库
indexedDB.open(“数据库的名字”); -> IDBOpenDBRequest
IDBOpenDBRequest:
监听事件：
onerror:创建或者 打开数据库 失败的时候 调用
onsuccess：创建或者 打开数据库成功 的时候 调用
onupgradenneeded：当数据库的版本号 被更新的时候调用
3.创建类似于BMOB里面 的某个表（也可以想象为是一个数据模型）
通过ObjectStore进行操作（增删改查建表）

1.建表(创建类)数据库的对象.createObjectStore(“名字”，设置唯一字段（设置这个类里面 可以找到某一个对象的属性）);
2.创建字段（给创建的类 添加属性）ObjectStore的对象.createIndex(“属性名”);
4.增删改查的操作
objectStore.add()
objectStore.delete()
objectStore.put()
objectStore.get()

Html5中数据存储的方式
1. Storage
2. webSQL数据库操作
3. Indexeddb数据库操作
Storage：setItem(key,value);
getItem(key);

1.sessionStorage:只在不关闭浏览器的情况下数据有效，只要关闭掉浏览器就会 清除保存的数据
2.localStorage：只要不清楚缓存 保存到浏览器的数据 一直存在

代码示例：
1. 打开数据库

functionopenDB() {
    varrequest= indexedDB.open("noteDB",1);
    request.onerror=function(errror) {
        console.log(errror);
    };
    request.onsuccess=function() {
        console.log("打开数据库成功");
    };
    //只在数据库版本号 两次不一致的情况下 调用
    request.onupgradeneeded=function() {
        console.log("更新数据库成功",this);
    };
}  

1. 建表从没有数据库到有数据库、数据库的版本号更新的时候再去建表。查询数据库中是不是存在 同样的表如果存在也别创建了onupgradeneeded可以监听数据库版本号的变更
   可以通过IDBDataBase里面的objectStoreNames 查看数据库里面都创建了 哪些表名vartableName=”note”;

//    可以通过objectStoreNames获取到 已经建好表的名字
    if(!db.objectStoreNames.contains(tableName)){
    //    建表
        varobjectStore=db.createObjectStore(tableName);
    //    创建表里面的字段
    //    创建字段的时候  需要 至少传入两个参数
    //    1.字段的名字 2.可以通过哪个名字  查找到 这个字段对应的内容
        objectStore.createIndex("title","title");
        objectStore.createIndex("content","content");
        objectStore.createIndex("date","date");
    } 

1. 增删改查的操作
   1）db -transaction()事务的对象
   2）事务的对象: objectStore
   3）objectStore : 增删改查

添加数据

functionaddData(info) {
    //获得到事务的对象
vartransaction=database.transaction(["note"],"readwrite");
    //存放某一种类型数据的容器（类似类）
    varobjectStore=transaction.objectStore("note");
//    执行增删改查的操作
    returnobjectStore.add(info);
} 

查询数据

GetgetAll functionsearchAll(){
 returndatabase.transaction(["note"],"readonly").objectStore("note").getAll();
}

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

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);
}; 

需要注意的事项：任何数据库的操作 更新字段、表需要先清除原来的数据库如果是查找、删除、修改具体的内容的时候需要根据一个唯一值查找