2021-05-12 14:32:11
chrome擴充套件開發：[11]本地儲存
2019-12-19 06:02:28
介紹了chrome擴充套件中用到的兩種儲存方式，HTML5 LocalStorage和chrome.storage
1
HTML5 LocalStorage是HTML5標準的一部分，大部分瀏覽器都提供了支援。localStorage是以key--value對的形式儲存的，key和value都只能是字串型別，如果你提供的是其他型別，儲存的時候也會被自動轉換為字串。2
獲取值(假設變數名稱是aa)var v=localStorage.aavar v=localStorage["aa"]var v=localStorage.getItem("aa");設定值(假設變數名稱是aa，要設定的值是"value1")localStorage.aa="value1";localStorage["aa"]="value1";localStorage.setItem("aa","value1");清除儲存項localStorage.removeItem("aa")清除全部儲存項localStorage.clear()3
檢測localStorage是否可用if(window.localStorage){?alert('可用');}else{?alert('不可用');}4
使用localStorage儲存json型別的資料：獲取資料var v=JSON.parse(localStorage.getItem("aa"))儲存資料localStorage.setItem("aa", JSON.stringify(v))5
注意，localStorage是以域為單位進行操作的，不同域的localStorage是完全隔離的。1
chrome.storage API是chrome擴充套件特有的api，它和HTML5 LocalStorage一個顯著不同是可以存取object資料。也是以鍵-值的形式存取。2
獲取
chrome.storage.local.get(keys, function(valueArray) {
alert(valueArray)
});
3
設定
chrome.storage.local.set({'value': theValue}, function() {
alert('儲存成功')
});
4
清除儲存項
chrome.storage.local.remove(keys，function() {
alert('清除成功')
})
5
清除全部儲存項
chrome.storage.local.clear(function() {
alert('清除全部儲存項成功')
})
1
用localStorage做一個範例，記錄前面例子中的新聞列表，這樣，下次開啟瀏覽器時，上次的新聞列表依然存在。2
擴充套件啟動時將localStorage裡的資料提取到變數中：
g_newsArr=JSON.parse(localStorage['newsArr']);
變數變化時將資料儲存到localStorage中：
localStorage['newsArr']=JSON.stringify(g_newsArr);
下面是程式碼截圖
3
由於localStorage只能儲存字串，而我們要存取的變數時陣列型別，所以使用了JSON.parse和JSON.stringigy，分別將字串轉化為陣列和將陣列轉化為字串4
這樣即使關閉瀏覽器後，下次啟動時扔能看到上次儲存的新聞列表
相關文章