Chrome瀏覽器擴充套件開發系列之八：Chrome擴充套件的資料儲存

Chrome擴充套件開發極客發表於2015-09-21
Chrome瀏覽器套件

Google Chrome瀏覽器擴充套件可以使用如下任何一種儲存機制：

  • HTML5的localStorage API實現的本地儲存（此處略）
  • Google的chrome.storage.* API實現的瀏覽器儲存
  • Google的chrome.cookies.* API實現的cookie儲存

 

1) chrome.storage API實現的瀏覽器儲存

Chrome瀏覽器擴充套件通過chrome.storage.* API，可以存取資料或監聽資料的變化。

在manifest.json檔案中註冊storage如下：

      {
        "permissions": [
          "storage"
        ],
      }

chrome.storage.* API提供了chrome.storage.sync， chrome.storage.local和chrome.storage.managed三種儲存空間型別。chrome.storage.local方式只能夠將資料儲存在當前登入的裝置本地。

chrome.storage.sync方式實現了自動資料同步，相同的使用者無論使用什麼物理裝置，只要以相同的賬戶登入即可訪問儲存的資料。裝置離線時資料儲存在本地，一旦裝置上線則同步資料。如果使用者禁止了資料同步，則採用chrome.storage.local方式。

chrome.storage.managed方式是隻讀儲存，只有域管理員能夠在其中儲存資料，Chrome瀏覽器擴充套件只能讀取其中的資料。

chrome.storage機制採用一系列的儲存格子（tubes）儲存資料，儲存空間有限。儲存資料時只能一個一進行寫入操作，併發效能不高。

下面以chrome.storage.sync為例介紹具體方法的使用：

  • 儲存一個或多個資料

chrome.storage.sync.set(object items, function() {...})

其中的items物件包含若干“鍵值對”的對映，一個鍵值對就是一個儲存的資料項。

  • 獲取指定key的資料項

chrome.storage.sync.get(string or array of string or object keys, function(object items) {...})

其中的keys如果為null則返回全部儲存的資料項，如果為””或[]將返回空物件{}。

回撥函式中的items物件就是獲取的資料項，其中包含“鍵值對”的對映。

  • 刪除指定key的一個或多個資料項

chrome.storage.sync.remove(string or array of string keys, function() {...})

  • 清空儲存的所有資料項

chrome.storage.sync.clear(function(){…})

  • 獲取當前已經被使用的儲存空間的數量（以位元組為單位）

chrome.storage.sync.getBytesInUse(string or array of string keys, function(integer bytesInUse) {...})

其中的keys屬性是資料項的key，如果為null表示取全部資料項的使用空間，””或[]將返回0

此外，對於某些敏感資料的變化，可以通過onChanged事件進行監聽。儲存格子中的任何變化都將觸發該事件，示例如下：

chrome.storage.onChanged.addListener(function(changes, namespace) {

for (key in changes) {

var storageChange = changes[key];

console.log('Storage key "%s" in namespace "%s" changed. ' +

'Old value was "%s", new value is "%s".',

key, //資料的索引key

namespace, //資料的儲存空間型別，列舉值"sync", "local", "managed"

storageChange.oldValue,//變化前的值

storageChange.newValue); //變化後的值

}

});

回撥函式中的changes物件包含了所有發生變化了的資料的key（string型別）和變化前後的值（StoreageChange型別），資料結構如下：

changes:{

  key1: obj

  key2: obj2

  …

  keyn: objn

}

 

2) chrome.cookies.* API實現的cookie儲存

Chrome瀏覽器擴充套件通過chrome.cookies.* API，可以獲取或修改cookie，還可以監控cookie的變化。

在manifest.json檔案中宣告cookie許可權以及要訪問的域如下：

{

"permissions": [

"cookies",

"*://*.google.com"

],

}

chrome.cookies.Cookie物件的屬性如下：

屬性名

型別

必選/可選

註釋

name

string

必選

Cookie物件的名字

value

string

必選

Cookie物件的值

domain

string

必選

Cookie物件適用的域

path

string

必選

Cookie物件適用的URL路徑

hostOnly

boolean

必選

Cookie物件是否只響應指定主機的請求，訪問Cookie物件的請求的主機必須在指定範圍內

secure

boolean

必選

Cookie物件是否被標記為Secure，這樣就只能通過安全通道（如HTTPS）訪問Cookie物件

httpOnly

boolean

必選

Cookie物件是否被標記為HttpOnly，這樣客戶端指令碼就無法訪問Cookie物件

session

boolean

必選

是否為Session級別的Cookie物件

expirationDate

double

可選

Cookie物件的過期時間，單位s

Session級別的Cookie物件沒有該屬性，因為會話結束即過期

storeId

string

必選

包含該Cookie物件的CookieStore的ID

其中，chrome.cookies.CookieStore物件表示瀏覽器中的cookie倉庫，常見的有正常模式的CookieStore和隱身模式的CookieStore。

chrome.cookies API中的常用方法：

  • 獲得一個Cookie物件，如果有多個符合過濾條件則返回擁有最長path的Cookie物件

chrome.cookies.get(object details, function(Cookie cookie) {...})

details物件的屬性如下：

屬性名

型別

必選/可選

註釋

url

string

必選

訪問Cookie物件的請求的URL

name

string

必選

Cookie物件的名字

storeId

string

可選

包含該Cookie物件的CookieStore的ID，預設為當前執行的上下文的CookieStore
  • 獲取一個CookieStore中的所有的Cookie物件

chrome.cookies.getAll(object details, function(array of Cookie cookies) {...})

details物件的屬性如下：

屬性名

型別

必選/可選

註釋

url

string

可選

訪問Cookie物件的請求的URI，影響domain和path

name

string

可選

Cookie物件的名字

value

string

可選

Cookie物件的值

domain

string

可選

Cookie物件適用的域

path

string

可選

Cookie物件適用的URL路徑

secure

boolean

可選

Cookie物件是否被標記為Secure，這樣就只能通過安全通道（如HTTPS）訪問Cookie物件

session

boolean

可選

是否為Session級別的Cookie物件

storeId

string

可選

包含該Cookie物件的CookieStore的ID
  • 設定Cookie物件

chrome.cookies.set(object details, function(Cookie cookie) {...})

details物件的屬性如下：

屬性名

型別

必選/可選

註釋

url

string

必選

訪問Cookie物件的請求的URI，影響domain和path

name

string

可選

Cookie物件的名字

value

string

可選

Cookie物件的值

domain

string

可選

Cookie物件適用的域

path

string

可選

Cookie物件適用的URL路徑

secure

boolean

可選

Cookie物件是否被標記為Secure，這樣就只能通過安全通道（如HTTPS）訪問Cookie物件

httpOnly

boolean

可選

Cookie物件是否被標記為HttpOnly，這樣客戶端指令碼就無法訪問Cookie物件

expirationDate

double

可選

Cookie物件的過期時間，單位s

Session級別的Cookie物件沒有該屬性，因為會話結束即過期

storeId

string

可選

包含該Cookie物件的CookieStore的ID
  • 根據名字刪除Cookie物件

chrome.cookies.remove(object details, function(object details) {...})

details物件的屬性如下：

屬性名

型別

註釋

url

string

要刪除的Cookie物件所關聯的URL

name

string

要刪除的Cookie物件的名字

storeId

string

要刪除的Cookie物件的CookieStore的ID
  • 獲取所有的cookie倉庫物件

chrome.cookies.getAllCookieStores(function(array of CookieStore cookieStores) {...})

  • 監聽Cookie物件的變化

chrome.cookies.onChanged.addListener(function(object changeInfo) {...})

如果Cookie物件的值被修改或刪除，則發出該事件。changeInfo物件的屬性如下：

屬性名

型別

註釋

removed

boolean

Cookie物件是否被刪除

cookie

chrome.cookies.Cookie

發生變化的Cookie物件

cause

chrome.cookies.OnChangedCause

導致Cookie物件變化的原因

相關文章