淺談瀏覽器本地儲存-indexedDB

網易考拉前端團隊發表於2017-09-15
瀏覽器Index

indexedDB 是 HTML5 提供的一種本地儲存，一般使用者儲存大量使用者資料並要求資料之間有搜尋需要的場景,當網路斷開的時候，可以做一些離線應用，它比 SQL 方便，不用去寫一些特定的語句對資料進行操作，資料格式為 json。

步驟：

1. 建立資料庫，並指定資料庫的版本號

var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
var request = indexedDB.open(databasename, version);
request.onerror = function(e){
    // 建立失敗回撥函式
};
request.onsuccess = function(e){
    // 建立成功回撥函式
};
request.onupgradeneededd = function(e){
    // 當資料庫改變是回撥函式
};
複製程式碼

注意這裡的版本號只可以是整數

2. 建立物件儲存空間

request.onupgradeneeded = function(event) { 
  var db = event.target.result;
  var objectStore = db.createObjectStore("name", { keyPath: "id" });
};
複製程式碼

3. 資料的增、刪、改、查

// 增
addData:function(db,storename,data){
    var store = store = db.transaction(storename,'readwrite').objectStore(storename),request;
    for(var i = 0 ; i < data.length;i++){
        request = store.add(data[i]);
        request.onerror = function(){
            console.error('add新增資料庫中已有該資料')
        };
        request.onsuccess = function(){
            console.log('add新增資料已存入資料庫')
        };
    }

}
複製程式碼

新增資料，重複新增會報錯

// 刪
deleteData:function(db,storename,key){
    var store = store = db.transaction(storename,'readwrite').objectStore(storename);
    store.delete(key)
    console.log('已刪除儲存空間'+storename+'中'+key+'記錄');
}
複製程式碼
// 改
putData:function(db,storename,data){
    var store = store = db.transaction(storename,'readwrite').objectStore(storename),request;
    for(var i = 0 ; i < data.length;i++){
        request = store.put(data[i]);
        request.onerror = function(){
            console.error('put新增資料庫中已有該資料')
        };
        request.onsuccess = function(){
            console.log('put新增資料已存入資料庫')
        };
    }
}
複製程式碼

重複新增已經存在的資料會更新原有資料

// 查
getDataByKey:function(db,storename,key){
    var store = db.transaction(storename,'readwrite').objectStore(storename);
    var request = store.get(key);
    request.onerror = function(){
        console.error('getDataByKey error');
    };
    request.onsuccess = function(e){
        var result = e.target.result;
        console.log('查詢資料成功')
        console.log(result);
    };
}
複製程式碼

根據儲存空間的鍵找到對應資料，本例為 id

4. 關閉資料庫

db.close();
複製程式碼

2.使用場景

掌握了使用步驟之後，我們來結合它的優、缺點談談其使用場景。

  • 不適合過大的資料儲存，瀏覽器對 indexDB 有 50M 大小的限制
  • 不適合對相容性要求高的專案
  • 不適合儲存敏感資料
  • 當使用者清除瀏覽器快取的時候可能出現問題
  • indexedDB 受到同源策略的限制

參考: indexedDB API

相關文章