LocalStorage 與 IndexedDB 區別也適用場景
LocalStorage 是用 key-value 鍵值模式存儲數據，它存儲的數據都是字符串形式。如果你想讓 LocalStorage存儲對象，你需要借助 JSON.stringify()能將對象變成字符串形式，再用 JSON.parse()將字符串還原成對象,就是專門為小數量數據設計的，所以它的 api 設計為同步的。

IndexedDB 很適合存儲大量數據，它的 API 是異步調用的。IndexedDB 使用索引存儲數據，各種數據庫操作放在事務中執行。IndexedDB 甚至還支持簡單的數據類型。IndexedDB 比 localstorage 強大得多，但它的 API 也相對復雜。對于簡單的數據，你應該繼續使用 localstorage，但當你希望存儲大量數據時，IndexedDB 會明顯的更適合，IndexedDB 能提供你更為復雜的查詢數據的方式

//需要存儲的數據列表 可以從后臺先請求 //ajax 第一次從后臺返回的數據結果let ajaxData={user:[{name:"aax",age:18,phone:"158264634852"},{name:"bbx",age:8,phone:"146846156516"},{name:"bx",age:108,phone:"158332553255"}],news:[{title:"縣人大常委會將對國慶三個縣 級開展工作評議",addr:"郫都區",time:"2019-07-29",img:["../static/images/pics1.png"],//組件內動態綁定的路徑是在運用當前組件內開始尋找id:"110",sharelinks:""},{title:"縣人大常委會將對國慶三個縣 級開展工作評議",addr:"郫都區",time:"2019-07-29",img:["../static/images/pics1.png"],//組件內動態綁定的路徑是在運用當前組件內開始尋找id:"111",sharelinks:""},{title:"縣人大常委會將對國慶三個縣 級開展工作評議",addr:"郫都區",time:"2019-07-29",img:["../static/images/pics1.png"],//組件內動態綁定的路徑是在運用當前組件內開始尋找id:"112",sharelinks:""}],chart:[1,2,3]} //數據庫相關信息 var dbInfo = { dbName:"DataBase",//數據庫名 dbVersion: 2070,//數據庫版本dbInstance: {//需要創建的事務中的倉庫名user:"user",news:"news",chart:"chart"} }; //indexedDB 兼容處理 window.onload = function(){justifyIndexDEB();//判斷是否支持indexedDB執行下面函數 }function justifyIndexDEB(){if("indexedDB" in window) {// 支持console.log(" 支持indexedDB...");createindexDB();//創建數據庫，接下來我們就到這里來了嘛} else {// 不支持console.log("不支持indexedDB...");window.indexedDB = window.mozIndexedDB || window.webkitIndexedDB;} } /** * 創建數據庫 * @param dbName [數據庫] 接收數據庫名 * @param dbVersion [版本號] 接收一個數據庫版本號 必須為整數 * @param dbInstance [表名集合] 當前需要添加或者創建的事務中的倉庫（表名） */ function createindexDB(){//1 通過接口的open方法打開一個indexedDB的數據庫實例var openRequest =window.indexedDB.open(dbInfo.dbName,dbInfo.dbVersion);//2 對打開數據庫的事件進行處理// 第一次打開成功后或者版本有變化自動執行以下事件：一般用于初始化數據庫。//如果要修改數據庫（+/-表 索引 主鍵）只能通過升級DB版本完成。openRequest.onupgradeneeded = function(e) { //第一次打開數據庫 ^-*console.log("第一次打開該數據庫，或者數據庫版本發生變化....");var db = e.target.result;//獲得數據庫//如果表格不存在，創建一個新的表格（keyPath，主鍵 ； autoIncrement,是否自增），會返回一個對象（objectStore）//創建數據庫的表格（或者叫數據庫倉庫）//指定需要被索引的字段及他的值是否時候唯一性 無主鍵//createstoreNames(db,dbInfo.dbInstance.user,Object.keys(ajaxData.user[0]))createstoreNames(db,dbInfo.dbInstance.user,[{name:"name",unique:true},{name:"age",unique:false}])//當前id為主鍵//createstoreNames(db,dbInfo.dbInstance.news,[{name:"id",unique:true},{name:"time",unique:false},{name:"addr",unique:false}],"id")}// 打開數據庫成功后，自動調用onsuccess事件回調。//可以通過函數來控制 //注意一個事務只能控制一條數據的增刪改查openRequest.onsuccess = function(e) { //success：打開成功^-^ console.log("數據庫打開成功...");// 獲取到 demoDB對應的 IDBDatabase實例,也就是我們的數據庫var db = e.target.result;//3 indexedDB 的增刪改查的操作需要放到一個事務中進行（推薦）//讀取數據// for(let i=0;i<ajaxData.user.length;i++){// get_data(db,dbInfo.dbInstance.user,i); // }//數據庫中添加數據let addData=true ///控制添加數據if(addData){for(let i=0;i<ajaxData.user.length;i++){//添加表名為user 的數據add_data(db,dbInfo.dbInstance.user,ajaxData.user[i])}// for(let i=0;i<ajaxData.news.length;i++){//添加表名為news 的數據// add_data(db,dbInfo.dbInstance.news,ajaxData.news[i])// }}raverse_data(db,dbInfo.dbInstance.user); //遍歷數據//raverse_data(db,dbInfo.dbInstance.news); //遍歷數據}//打開數據庫失敗openRequest.onerror = function(e) { //error：打開失敗*-*console.log("數據庫打開失敗..."); console.dir(e);} } /** * 添加倉庫列表到數據庫 * @param db [數據庫] * @param storename [需要添加的倉庫名] * @param [...createIndexArr] [當前倉庫名那些字段需要別索引] * @param isKey [當前是否需要自定義主鍵] 默認為false 不傳值獲取傳空就說明當前倉庫沒有合適的主鍵名 穿值就以值為主鍵 */ function createstoreNames(db,storename,createIndexArr,isKey=false){var storeNames = db.objectStoreNames;//獲得數據庫表名列表if(!storeNames.contains(storename)){//當前表名如果有主鍵則直接用該主鍵//當前表名如果沒有主鍵那么用自定義主鍵，并且自增let objectStore=null;if(!isKey){//當前沒傳主鍵objectStore=db.createObjectStore(storename,{keyPath:storename+"IndexedDBId",autoIncrement:true})}else{objectStore=db.createObjectStore(storename,{keyPath:isKey})}/* @param* unique 當前字段是否唯一看具體情況先不寫 都是不唯一的 免得添加數據失敗*/for (let i = 0; i < createIndexArr.length; i++) {//指定可以被索引的字段，unique字段是否唯一。類型： IDBIndex 坑objectStore.createIndex(createIndexArr[i].name,createIndexArr[i].name, {unique: createIndexArr[i].unique});}} } /** * 添加數據* @param db [數據庫] 接收數據庫名* @param storename [名稱] 接收一個數據庫里的倉庫名* @param data [值] 接收一個數組對象*/ function add_data(db,storename,dataobj){//創建一個事務處理添加數據 如果不創建默認只讀var trans = db.transaction(storename,"readwrite");//readwrite 可讀寫// 通過事務來獲取IDBObjectStorevar store = trans.objectStore(storename);//單獨添加var addPersonRequest=store.add(dataobj)// 監聽添加成功事件addPersonRequest.onsuccess = function(e) {// console.log("數據添加成功主鍵為："+e.target.result); // 打印添加成功數據的 主鍵（id）//可以根據id來查找數據庫的數據+};// 監聽失敗事件addPersonRequest.onerror = function(e) {console.log("數據添加異常:"+e.target.error);}; } /** * 按key獲取數據 * @param db [數據庫] 接收數據庫名 * @param storename [名稱] 接收一個數據庫里的倉庫名 * @param data [值] 接收一個數組對象 */ function get_data(db,storename,keyid){//創建一個事務處理讀取數據var transaction = db.transaction(storename, 'readwrite');// 通過事務來獲取IDBObjectStorevar store = transaction.objectStore(storename);//查詢數據 根據id查詢值var getdata=store.get(keyid+1) //值為 key 主鍵的值 key是從1開始的getdata.onsuccess = function(e) {if (getdata.result) {console.log("查詢key為"+(keyid+1)+"的值為："+JSON.stringify(getdata.result) );//獲得需要查詢的數據} else {console.log('未獲得數據記錄');}}; } /** * 便利數據 * @param db [數據庫] 接收數據庫名 * @param storename [名稱] 接收一個數據庫里的倉庫名 */ function raverse_data(db,storename){//創建一個事務處理讀取數據var transaction = db.transaction(storename, 'readwrite');// 通過事務來獲取IDBObjectStorevar store = transaction.objectStore(storename);//查詢數據 查詢所有該表所有數據var result=[]store.openCursor().onsuccess = function (event) {var cursor = event.target.result;if (cursor) {// console.log('Name: ' + cursor.value.name);result.push(cursor.value)cursor.continue();//繼續下一個} else {// 如果全部遍歷完畢...console.log('沒有更多數據了！查詢到表名為'+storename+"的所有數據列表：");console.log(result)}}} // del_data(db); //數據庫中刪除數據 包括表 // update_data(db);//更新數據（類似于Add方法） function deletedb(dbname) {var self = this;self.indexedDB.deleteDatabase(dbname);console.log(dbname + '數據庫已刪除') }

總結

以上是生活随笔為你收集整理的indexedDB的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。