我正在尝试构建一个扩展，允许用户将一些参数放入弹出窗口中的文本框中，使用该信息生成一个链接并将其添加到所述弹出窗口中。我已经完成了所有工作，但不用说，每次用户重新打开扩展程序时它都会被刷新。我希望保留其中的信息，但似乎无法使其发挥作用。这是我到目前为止所得到的:
manifest.json
{
"manifest_version": 2,
"name": "Test",
"description": "Test Extension",
"version": "1.0",
"permissions": [
"http://*/*",
"https://*/*"
],
"browser_action": {
"default_title": "This is a test",
"default_popup": "popup.html"
}
}
popup.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="linkContainer"/>
<input type="text" id="catsList"/>
<button type="button" id="addToList">Add</button>
<script src="popup.js"></script>
</body>
</html>
popup.js
function addCats()
{
var a = document.createElement('a');
a.appendChild(document.createTextNode(document.getElementById('catsList').value));
a.setAttribute('href', 'http://google.com');
var p = document.createElement('p');
p.appendChild(a)
document.getElementById('linkContainer').appendChild(p);
indexLinks()
}
function indexLinks()
{
var links = document.getElementsByTagName("a");
for (var i = 0; i < links.length; i++)
{
(function ()
{
var ln = links[i];
var location = ln.href;
ln.onclick = function ()
{
chrome.tabs.create({active: true, url: location});
};
})();
}
};
document.getElementById('addToList').onclick = addCats;
我的猜测是我需要类似的东西
localStorage['cointainer'] = document.getElementById('linkContainer');
在 addCats() 的末尾并调用类似的内容
function loadLocalStorage()
{
var container = document.getElementById('linkContainer');
container.innerHTML = localStorage['container'];
}
一开始，但是这样做并没有成功。不确定出了什么问题。
此外，如果有不同的方式来保存用户添加的内容，我会乐意接受。
最佳答案
localStorage仅支持存储字符串值。您无法存储整个 HMTL 元素。
localStorage['foo'] = 'bar';
localStorage['foo'] = JSON.stringify({'bar': 'baz'});
localStorage['foo'] = JSON.stringify(['bar', 'baz', 'qux']);
您必须迭代要保存的元素列表，将字符串值放入数组中，并在将其保存到 localStorage 之前使用 JSON.stringify 。然后在加载时，您从 localStorage 中提取值，JSON.parse 它，并为数组中的每个值创建新的 HTML 元素。
关于javascript - 如何在 Chrome 扩展中从本地存储读取和写入 div 的内容？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23965555/