将阵列保存到本地存储

Question

我是WebExtensions和JavaScript的新手。我正在尝试编写一个带有pageAction按钮的小扩展，该扩展仅在单击时将当前 URL 保存到本地存储(即一些非常简单的"收藏夹"功能(。但是，我在使用chrome.storage.local.set()和.get()时遇到问题。我一直在研究这个问题和这个问题中的代码，试图为我的目的重用它，但惨遭失败。这是我目前所拥有的。

saveURL()函数应该在本地存储中加载数组，使用新的 URL 更新它，然后将其保存回本地存储(现在，我只有一个 dud 字符串，我试图将其推送到该数组(。

async function saveURL() {
console.log("Save URL called.");
var urls = await loadURLs();
console.log(urls);
urls.push("a-new-url")
console.log(urls);
chrome.storage.local.set({'pearsurls': urls});
urls = await loadURLs();
console.log(urls);
return true;
}

loadURLs()函数应该从本地存储中检索内容。我在storage.local.get()中使用默认值在第一次使用数组时初始化数组。

function loadURLs(){
var pearsurls = []
console.log("Loading all saved URLs");
chrome.storage.local.get({pearsurls: []}, function (result) {
pearsurls = result.pearsurls;
console.log(pearsurls)
});
console.log(pearsurls)
return pearsurls;
}

控制台中的输出给我：

Save page  save.js:52:3
Save URL called.  save.js:5:3
Loading all saved URLs  save.js:38:3
Array [  ]  save.js:43:3
Array [  ]  save.js:7:3
Array [ "a-new-url" ]  save.js:9:3
Loading all saved URLs  save.js:38:3
Array [  ]  save.js:43:3
Array [  ]

即我的loadURLs()函数似乎没有做任何事情......我做错了什么？

Answer 1

你的函数loadURLs既不async也不返回一个Promise，所以它立即以一个空数组结束。

试试这个：

function loadURLs(){
console.log("Loading all saved URLs");
return new Promise((resolve, reject) => {
console.log("Promise");
chrome.storage.local.get({pearsurls: []}, function (result) {
console.log(result.pearsurls);
resolve(result.pearsurls);
});
});
}

注意：您的原始函数在chrome.storage.local.get完成其工作之前结束。数组pearsurls首先返回为空，并在代码执行后随时使用回调function (result) ...填充它。