Chrome.storage.local使用问题：用变量作键set存值后get返回undefined

我来帮你梳理下代码里的问题，其实是几个容易忽略的细节导致的：

问题1：对象字面量的键名错误 #

你在saveValue里写的chrome.storage.local.set({network: value})，这里的network是字符串字面量，不是变量引用——也就是说，你实际存储的键是固定字符串"network"，而不是传入的参数'c1'。要把变量作为对象的键名，必须用方括号语法：{[network]: value}。

问题2：异步操作的顺序问题 #

Chrome的Storage API所有方法都是异步的，你调用saveValue('c1','v1')之后立刻执行printValue('c1')，这时候存储操作可能还没完成，所以获取到的自然是undefined。必须确保存储完成后再执行取值操作，可以用回调、Promise或者async/await来处理。

问题3：取值时的属性访问错误 #

在printValue的回调里，data.network同样是在访问固定键"network"，而不是你传入的变量network，应该用data[network]来根据变量键获取对应的值。

修正后的代码（回调版本） #

// 先存储，完成后再取值
saveValue('c1', 'v1', () => {
  printValue('c1');
});

function saveValue(network, value, callback) {
  // 用方括号把变量作为键名
  chrome.storage.local.set({[network]: value}, callback);
}

function printValue(network) {
  chrome.storage.local.get(network, function(data){
    // 用变量键访问对应的值
    console.log(data[network]);
  });
}

修正后的代码（Async/Await版本，更易读） #

// 用async函数包裹异步操作
async function init() {
  await saveValue('c1', 'v1');
  await printValue('c1');
}

// 将set包装成Promise
function saveValue(network, value) {
  return new Promise(resolve => {
    chrome.storage.local.set({[network]: value}, resolve);
  });
}

// 将get包装成Promise
function printValue(network) {
  return new Promise(resolve => {
    chrome.storage.local.get(network, function(data){
      console.log(data[network]);
      resolve();
    });
  });
}

// 执行初始化
init();

这样修改后，就能正确存储'c1':'v1'并成功打印出v1了。

内容的提问来源于stack exchange，提问作者lol