應用緩存 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);
}; 

需要注意的事項：任何數據庫的操作 更新字段、表需要先清除原來的數據庫如果是查找、刪除、修改具體的內容的時候需要根據一個唯一值查找