chrome浏览器插件开发v3——storage存储的使用

前言

为了减少浏览器运行内存,background页面现在已更改为service_worker按需运行,即不使用的情况下service_worker会自动关闭,如果使用的话将再次开启,一段时间后又会自己关闭,并且每次调用开启的时候都会进行初始化,这将导致不能再像之前v2版本一样将变量存在全局,所以storage存储将变得更加重要

基础本地存储使用方法

 //执行存储
 chrome.storage.local.set({ 'value': theValue })
 //获取存储
 chrome.storage.local.get(["value"], (result)=> {
     if (result.value) {···}
 })
 //删除存储
 chrome.storage.local.remove("value")

基础同步存储使用方法

   //执行存储
   chrome.storage.sync.set({ 'value': theValue })
   //获取存储
   chrome.storage.sync.get(["value"], (result)=> {
       if (result.value) {···}
   })
   //删除存储
   chrome.storage.sync.remove("value")

两者的区别是sync在用户登录谷歌账户的时候并且开启了同步可以将存储同步到任何一个同样登录的浏览器,没有进行登录或开启同步的时候和local一样保存在本地

监听存储实时更新

chrome.storage.onChanged.addListener(function(changes, namespace) {
   for (let [key, { oldValue, newValue }] of Object.entries(changes)) 
   {
    //存储的名字
    console.log(key)
    //存储的类型local或者sync
    console.log(namespace)
    //存储更新前的数据,首次存储为undefined
    console.log(oldValue)
    //存储更新后的数据
    console.log(newValue)
        }
});