LocalStorage與IndexDB的使用

localstorage 用於本地儲存，解決了cookie的儲存空間不足問題，cookie儲存空間一般為4k，而localstorage一般在瀏覽器分配的空間大小為5m，(不同的瀏覽器分配的儲存空間大小不等)。

localstorage與sessionstorage相比，生命週期更長，便於資料長期儲存。localstorage值型別限定為string；在瀏覽器隱私模式下是不可讀取的；（儲存內容過多會導致頁面卡頓）；不會被爬蟲爬取！！

// localstorage寫入
var data =
;window.localstorage.
setitem
('dataname'
, data)
;//或者
localstorage.
setitem
('dataname'
, data)
;//localstorage讀取
var data2= window.localstorage.
getitem
("dataname");
//或者
var data2= localstorage.
getitem
("dataname"
);

index db是一種前端資料庫，代替了已經廢棄的web sql database，與localstorage相比，indexdb的儲存容量受全域性限制和組限制倆個元素的限制，但是對於一般前端需要儲存的資料已經足夠。

更多詳細的介面和規範到 **.檢視，在本文章只進行簡單的例子展示。

// indexdb初始化
init()
var idbopendbrequest = indexeddb.
open
('datalist',1
);idbopendbrequest.
onupgradeneeded
=(e)
=>);
//   //指定可以被索引的字段，unique欄位是否唯一。型別： idbindex
objectstore.
createindex
('name'
,'name',)
;		         console.
log(
'資料庫版本更改為： '
+ e.version,
'倉庫1');
}};		 idbopendbrequest.
onsuccess
=(e)
=>
;		 idbopendbrequest.
onerror
=function
(e);
},

注意：在indexeddb大部分操作並不是我們常用的呼叫方法——返回結果的模式，而是請求——響應的模式，也就是非同步api。

// 新增和修改資料，因為indexdb的修改資料是根據儲存的id修改，所以在此處筆者做了處理，當新增資料失敗的時候重新呼叫修改資料put方法。
adddata
(id,name,data));
request.
onsuccess
=function
(event)
;		      			
request.
onerror
=function
(event));
mtobj.
onsuccess
=function
(event)
;									
mtobj.
onerror
=function
(event)}}
;},

// 刪除資料 ，和修改方法一樣也是根據儲存的id去索引
deldata
(id,callback);	
mtobj.
onerror
=function
(event)}}
,

// 讀取資料,根據儲存的id去索引
getdata
(id,callback);	
myobj.
onerror
=function
(event)}}
,

建議將indexdb的方法封裝，以便以後專案的呼叫。

以下將展示vue的封裝和使用：

// an highlighted block
//將以上的方法封裝成db
constdb=
//暴露方法
export
//vue頁面引用
import
from
'indexdb封裝路徑'
//使用db.
init()
;db.adddata(1
,'xiaoge'
,function
(a));db
.deldata(1
,function
(a))db.
getdata
('xiaoge'
,function
(a))

為了解決介面非同步問題，在indexdb封裝的時候加入了callback方法，前端資料執行完畢呼叫callback()，頁面呼叫方法時，在function（a）中寫方法執行完的**。

最後提一句，indexdb的資料儲存型別分兩種：持久化儲存和臨時儲存！！！敲重點，臨時儲存達到儲存上限會直接刪除整個源資料，不會只刪除一部分，而是整個！！血淋淋的教訓，具體儲存型別使用在上文給的鏈結裡有介紹，在這就不介紹了。

LocalStorage與IndexDB的使用

localstorage原理與使用

正規表示式與localStorage

本地快取localstorage

LocalStorage與IndexDB的使用

localstorage原理與使用

正規表示式與localStorage

本地快取localstorage

相關推薦