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

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。