如何在 chrome 扩展中从 localstorage 读取和写入 div 的内容？答案

【问题标题】：How to read & write contents of a div from localstorage in chrome extensions?如何在 chrome 扩展中从 localstorage 读取和写入 div 的内容？
【发布时间】：2023-03-28 06:50:02
【问题描述】：

我正在尝试构建一个扩展，允许用户将一些参数放入弹出窗口的文本框中，使用该信息生成链接并将其添加到所述弹出窗口。我已经完成了所有这些工作，但不用说，每次用户重新打开扩展程序时它都会被刷新。我希望保留在那里的信息，但似乎无法让它发挥作用。到目前为止，这是我所拥有的：

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'];
}

一开始，但这样做并没有奏效。不知道出了什么问题。

另外，如果有不同的方法来保存用户的添加，我会向他们开放。

【问题讨论】：

出于好奇，您为什么在for 循环中使用IIFE？
@leemo: stackoverflow.com/questions/1451009/…
@Qantas94Heavy aha！干杯人。

标签： javascript google-chrome-extension local-storage

【解决方案1】：

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 元素。

【讨论】：

谢谢！工作完美。我的链接不再有效，我不知道为什么，但信息正在被存储，这很棒。