Javascript 尝试在chrome扩展选项页面中将网站添加到localstorage

我希望能够将网站添加到chrome扩展选项页面。因此，我有一个带有“保存”按钮的文本框，我希望能够保存多个网站，以便以后编辑或删除它们。像这样：

输入URL:|uuuuuuuuuuuuuuuuuuu|uuu保存|

编辑删除-www.google.com
编辑删除-www.msn.com
编辑删除-www.yahoo.com

---

一旦您输入一个网站并单击“保存”，它会将其添加到已有网站的列表中。我一直在尝试清理互联网，试图找出如何实现这一点，但我只是对它了解不够，无法完成它。

我建议

chrome.storage

而不是

localStorage

：

太棒了。你甚至可以选择在谷歌档案中在线存储数据（最大100KB）。否则离线（我认为最大100MB）

API也非常简单：

chrome.storage.local.get('websites', function(items) {
  console.log('websites:', items.websites);
});

与

localStorage

不同，它是异步的，因此您将使用回调。但是它的速度很快，所以用户界面不会注意到

我要做的不是保留存储的虚拟记录，而是将其保存在HTML中，并根据需要对其进行读/写：

• btnAdd向列表中添加新的li，然后保存列表
• btnEdit填充文本字段并从列表中删除li（不保存）（通过btnAdd保存）
• btnDelete从列表中删除li并保存列表
• 保存=从列表中获取项目作为数组并保存到存储器
• init=从存储和填充列表加载项目

我假设jQuery是因为它很流行。当然没必要

---

如果你已经在这方面遇到了问题，那么Chrome扩展将非常困难。

这似乎是一个更好的解决方案，但正如我所说，我对它的了解还不够，无法完成它。希望你能详细说明一下。我基本上是存储一个一维数组。我需要能够在数组中添加/编辑/删除项目。我的想法是，我需要将当前项目（如果有）拉入数组变量中，使用.push（）命令将项目添加到数组中，然后将其与添加的URL一起保存回chrome存储区。这是我所拥有的，但我得到了一个错误：

var URLarray=[]；chrome.storage.local.get（'websites'，function（items）{URLarray=items；URLarray.push（itemURL.value）；chrome.storage.local.set（{'websites'：URLarray}，function（）{alert（'Settings saved'）；}）console.log（'websites:'，items.websites）；}）我不会保留虚拟阵列/记录。我会用一些半伪代码的东西更新我的答案。谢谢你的帮助和时间来编写代码。但我不确定这是否有助于我实现最终目标。这是一个选项页，出于扩展的主要原因，如果它不在某种类型的存储中，它如何读取选项页？此外，它在JSFIDLE中也可以完美地工作，但是当我将代码复制到扩展时，add按钮不起作用。它只是停留在…加载。。。text关于尝试构建Chrome扩展，你可能是对的——我可能现在不得不放弃它。