Hi Dai Gei Ho~ 我是Winnie ~

關於今天的主題 Storage 相信大家多少不太陌生，甚至平時在開發網站時多少有使用過它，例如最常見的應用為 將使用者已加入購物車中的商品儲存於Storage中，這樣使用者下次再進入當前網站時就可以不加思索的知道上次所加入的商品內容，已達到好的使用者體驗。

類似這樣的功能，除了在瀏覽器中的 localStorage API可以達成，同時在Extension中， 也可以透過 Chrome.Storage 來達成。

關於 Chrome.Storage

說到 Chrome.Storage 雖然作用方式與 localStorage API 的功能大致相同，
但兩者還是有點區別的，Chrome 針對其方法又再進行優化，主要區別如下:

• 透過 storage.sync方法，使用者登入後可以通過 同步方法將數據同步於Chrome 瀏覽器中
• Content Script 頁面無需透過 Backround的傳遞 可以直接存取 Extension 中的 Storage 數據
• 相較於阻塞和串行化的 localStorage API，chrome.storage經過優化，為非同步的方式運行，同時可以大量的存取資料內容，可以更快速的運行。
• 資料可以存儲為Object 型別（localStorage API 需以String來進行存取）。

Chrome.Storage 中的方法

同時因為Chrome.Storage 可以同步數據存於使用者登入過的Chrome 瀏覽器 中，所以在 Chrome.Storage 方法中 又可以分為 chrome.storage.sync 與 chrome.storage.local

怎麼使用呢？ 首先需先在 Manifest 中 進行權限設定:

{
    "name": "My Extension"
    ...
    "permissions":[
      "storage"
    ],
    ...
}

chrome.storage.sync

chrome.storage.sync方法除了可以將數據存於local端之外，如果使用者有登入Chrome 瀏覽器 且開啟自動同步，就可以將數據同步於帳號之中。

//存入方法
chrome.storage.sync.set({key: value}, ()=>{})

//讀取方法
chrome.storage.sync.get(['key'], res=>{
  console.log(res.key)
})

但問題來惹～假設 遇到 Chrome 離線了要如何處理？

當遇到了 Chrome 離線時，storage.sync會將數據先存在本機端，當頁面再開啟時，接著會再將數據同步儲存於帳戶之中。

那如果沒有開啟Chrome自動同步呢？

此時 storage.sync還是可以繼續使用，只是其功能效果就與 storage.local一樣。

chrome.storage.local:

storage.local 與 localStorage API 方法相同，只會儲存於本機端。

//存入方法
chrome.storage.local.set({key: value}, ()=>{})

//讀取方法
chrome.storage.local.get(['key'], res=>{
  console.log(res.key)
})

// 清除
chrome.storage.local.remove([key], (result) => {
  console.log('Removed items for the key: ' + key);
});

注意的事項:

雖然 Storage 存取相當方便，但在文件中還是有給出相關建議事項:

• 不應儲存 未經過加密的敏感資訊，像是關於用戶的個人資訊
• 由於 Chrome.storage 的容量是有所限制的，所以當容量滿了亦就可能會造成延遲。

你滿出來我就慢出來了

關於Storage容量這件事，文件中有提到:

storage.sync:

512為可以存儲在storage.sync的最大項目數。會導致超出此限制的更新將立即失敗並設置

storage.local:

5242880為可以存儲在storage.local的最大項目數。如果設置 unlimitedStorage，這個執會被忽略，同時會導致超出此限制的更新將立即失敗並觸發 runtime.lastError

監聽 Storage Change 事件

透過設置chrome.storage.onChanged.addListener可以監聽Storage 對應值的變動。

這邊需注意 新增 Storage的欄位不會觸發事件，只有已存在的欄位值改變時才會觸發

chrome.storage.onChanged.addListener(async (changes, namespace) => {
      for (let [key, { oldValue, newValue }] of Object.entries(changes)) {
          console.log(key, newValue);
      }
    }); 

以上就是關於 Chrome Storage 的用法介紹，那今天文章先到這邊了，謝謝願意花時間看此篇文章的你，如果文章有錯誤的地方，再麻煩不吝嗇的給予指教，感謝!!

今日有感而發(文長:

不知道為什麼，最近突然地，我又開始焦慮起自己寫的內容了
可能因為越寫越寫凌亂，進而開始有點質疑自己是不是該繼續下去

結果突然看 這段對話(來自於高見龍 龍哥貼文) 他們這樣說的:

他人: 不強也可以寫技術文嗎？
龍哥: 不寫怎麼變強？

突然人間清醒的跟著唸一遍 對啊，不寫我怎麼變強(這句也送給大家)
於是我又開始寫起來了，預計後續文章應該還是亂，但我計畫30天結束後，再回頭來將沒寫到的內容及Demo範例來補齊

今天想分享一首歌 -> 此刻是不會再擁有的此刻了