Chrome storage存儲 API使用詳解

Chrome 爲擴展應用提供了存儲 API，以便將擴展中需要保存的數據寫入本地磁盤。Chrome 提供的存儲 API 可以說是對 localStorage 的改進，它與 localStorage 相比有以下區別：

• 用戶數據可以通過 Chrome 瀏覽器的同步功能自動同步（使用 storage.sync）

• content_scripts 可以直接讀取數據，而不必通過 background 頁面

• 在隱身模式下仍然可以讀出之前存儲的數據

• 讀寫速度更快

• 用戶數據可以以對象的類型保存（localStorage API 以字符串方式存儲數據）。

對於第二點要進一步說明一下。首先 localStorage 是基於域名的。而 content_scripts 是注入到用戶當前瀏覽頁面中的，如果 content_scripts 直接讀取 localStorage，所讀取到的數據是用戶當前瀏覽頁面所在域中的。

所以通常的解決辦法是 content_scripts 通過 runtime.sendMessage 和 background 通信，由 background 讀寫擴展所在域（通常是 chrome-extension://extension-id/）的 localStorage，然後再傳遞給 content_scripts。

 

---

 

使用 Chrome 存儲 API 必須要在 Manifest 的 permissions 中聲明 "storage"，之後纔有權限調用。

Chrome 存儲 API 提供了 2 種儲存區域，分別是 sync 和 local。兩種儲存區域的區別在於，sync 儲存的區域會根據用戶當前在 Chrome 上登陸的 Google 賬戶自動同步數據，當無可用網絡連接可用時，sync 區域對數據的讀寫和 local 區域對數據的讀寫行爲一致。

對於每種儲存區域，Chrome 又提供了 5 個方法，分別是 get、getBytesInUse、set、remove 和 clear。

在 sync 區域存儲和讀取數據：

 

chrome.storage.sync.set({key: value}, function() {
    console.log('Value is set to ' + value);
});

chrome.storage.sync.get(['key'], function(result) {
    console.log('Value currently is ' + result.key);
});

local 區域：

 

chrome.storage.local.set({key: value}, function() {
    console.log('Value is set to ' + value);
});

chrome.storage.local.get(['key'], function(result) {
    console.log('Value currently is ' + result.key);
});

 

---

 

下面我們寫個小例子來說明。

編寫 manifest.json 文件：

 

{
    "manifest_version": 2,
    "name": "存儲測試",
    "version": "1.0",
    "description": "存儲測試",

    "browser_action": {
        "default_popup": "popup.html"
    },

    // 設定使用存儲的權限
    "permissions": [
        "storage"
    ]
}

編寫 popup.html 頁面：

 

<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    body {
        width: 250px;
        height: 300px;
    }
</style>

<script type="text/javascript" src="js/popup.js"></script>

編寫 popup.js 文件：

 

var user1 = {'name': 'diego', 'age': 18}

// 往存儲中寫入數據
chrome.storage.sync.set({'user1': user1}, function() {
    console.log('保存成功');
});

// 從存儲中讀取數據
chrome.storage.sync.get('user1', function(result) {
    document.write('name: ' + result['user1'].name + '<br>' + 'age: ' + result['user1'].age );
});

現在我們能在頁面上看到剛存儲的數據：

 

 

---

 

在 get() 方法中 keys 可以是字符串、包含多個字符串的數組或對象。

如果 keys是字符串，則和 localStorage 的用法類似（見上例）；如果是數組，則相當於一次讀取了多個數據。

 

var user1 = {'name': 'diego', 'age': 18}
var user2 = {'name': 'tony', 'age': 19}

// 往存儲中寫入數據
chrome.storage.sync.set({'user2': user2}, function() {
    console.log('保存成功');
});

chrome.storage.sync.set({'user1': user1}, function() {
    console.log('保存成功');
});

// 從存儲中讀取數據
chrome.storage.sync.get(['user1', 'user2'], function(result) {
    document.write(
        'name: ' + result['user1'].name + '<br>' + 'age: ' + result['user1'].age 
        + '<hr>' 
        + 'name: ' + result['user2'].name + '<br>' + 'age: ' + result['user2'].age
        );
});

如果 keys 是對象，則會先讀取以這個對象屬性名爲鍵值的數據，如果這個數據不存在則返回 keys 對象的屬性值（比如 keys 爲 {'name':'Billy'}，如果 name 這個值存在，就返回 name 原有的值，如果不存在就返回 'Billy'）。

 

var user1 = {'name': 'diego', 'age': 18}
var default_user = {'name': 'default_user', 'age': 18}


// 往存儲中寫入數據
chrome.storage.sync.set({'user1': user1}, function() {
    console.log('保存成功');
});

// 從存儲中讀取數據
chrome.storage.sync.get({'user2': default_user}, function(result) {
    document.write('name: ' + result['user2'].name + '<br>' + 'age: ' + result['user2'].age );
});

因爲 'user2' 這個值是不存在的，所以返回的是 default_user 這個對象；如果換成 'user1' 這個存在的值，則會返回 user1 這個對象。

如果 keys 爲一個空數組（[]）或空對象（{}），則返回一個空列表，如果 keys 爲 null，則返回所有存儲的數據。

 

---

 

getBytesInUse() 方法爲獲取一個數據或多個數據所佔用的總空間，返回結果的單位是字節，完整方法爲：

 

// sync 區域
chrome.storage.sync.getBytesInUse(keys, function(bytes){
    console.log(bytes);
});

// local 區域
chrome.storage.local.getBytesInUse(keys, function(bytes){
    console.log(bytes);
});

此處的 keys 只能爲 null、字符串或包含多個字符串的數組。

 

---

 

set() 方法爲寫入數據，完整方法爲：

 

// sync 區域
chrome.storage.sync.set(items, function(){
    //do something
});

// local 區域
chrome.storage.local.set(items, function(){
    //do something
});

items 爲對象類型，形式爲鍵/值對。items 的屬性值如果是字符型、數字型和數組型，則儲存的格式不會改變，但如果是對象型和函數型的，會被儲存爲 "{}"，如果是日期型和正則型的，會被儲存爲它們的字符串形式。

 

---

 

remove() 方法爲刪除數據，完整方法爲：

 

// sync 區域
chrome.storage.sync.remove(keys, function(){
    //do something
});

// local 區域
chrome.storage.local.remove(keys, function(){
    //do something
});

其中 keys 可以是字符串，也可以是包含多個字符串的數組。

 

---

 

clear() 方法爲刪除所有數據，完整方法爲：

 

// sync 區域
chrome.storage.sync.clear(function(){
    //do something
});

// local 區域
chrome.storage.local.clear(function(){
    //do something
});

 

---

 

Chrome 同時還爲存儲 API 提供了一個 onChanged() 事件，當存儲區的數據發生改變時，這個事件會被激發。

onChanged() 的完整方法爲：

 

chrome.storage.onChanged.addListener(function(changes, areaName){
    console.log('Value in '+areaName+' has been changed:');
    console.log(changes);
});

callback() 會接收到兩個參數，第一個爲 changes，第二個是 StorageArea。changes 是詞典對象，鍵爲更改的屬性名稱，值包含兩個屬性，分別爲 oldValue 和 newValue；StorageArea 爲 local 或 sync。

作者：SingleDiego
鏈接：https://www.jianshu.com/p/f6ac6e3ee7a3
來源：簡書
著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。