javascript - 在 chrome 扩展上全局存储文本，并在加载时重用它

Question

我正在尝试创建一个简单的剪贴板扩展。我有 6 个用作复制/粘贴平台的 textarea 对象。我希望这些对象“记住文本”以供将来使用(即使在扩展关闭后)。

textarea 对象是这样构建的:

<table>
            <tr>
                <td>
                    <textarea id="container_1" class="container" rows="4" cols="50" value="" focusout="SetTextBoxString(1)"></textarea>
                </td>
                <td>
                    <textarea id="container_2" class="container" rows="4" cols="50" value="" focusout="SetTextBoxString(2)"></textarea>
                </td>
            </tr> 
(...)

注意id是容器+对象的编号(一直到6)

在 JavaScript 方面，我使用 onload 事件循环遍历所有这些对象，并从全局存储中获取数据并将其放入 textarea 中.对于输入，我使用 SetTextBoxString() 对象将该字段中的内容“发送”到全局存储。这是 js:

var texts = [];
Load_func()
{
    for (var i = 1; i <= 6; i++) {
        chrome.storage.sync.get(["Txt_" + index], function (items) {
            var obj = JSON.parse(items);
            var txt = "Txt_" + i
            texts.push(obj.txt)
            document.getElementById("container_" + i).innerHTML = texts[i]
        });
        if (!texts[i])
        {
            document.getElementById("container_" + i).value = "add"
        }
    }

}
SetTextBoxString(index)
{
    var sorcestring = "Txt_" + index;
    chrome.storage.sync.set({ sorcestring : document.getElementById("container_" + index).innerHTML }, function () {

    });
}

它工作正常，但是当我刷新页面时文本消失了。我做错了什么？

我知道这是一个很长的问题，我已尽我所能缩短它的长度，但不幸的是。如果你能帮助我，我真的很感激。提前谢谢你!

来源:

How can I save information locally in my chrome extension?

Answer 1

如果你愿意，你可以转而使用 JQuery，但有些人认为它相当无用，我不久前在 JQuery 中为一个与你的项目类似的项目创建了这段代码，但更像是一个“笔记本”

如果我使用普通的 javascript，我似乎无法让这段代码“成功”工作 100%，所以不幸的是，除非你想将大块头的 ol'JQuery 连接到你的项目，否则这个答案不是很有用。

无论如何，这段代码会自动适应你有多少“输入”，它会保存他们的数据，然后将其绑定(bind)到本地存储。我也是 Extensions 的新手，但如果我不得不猜测为什么您当前的代码无法正常工作，则可能是您的扩展程序正在尝试保存数据，所以一些未知的 URL，因为本地存储主要基于单独的网站，其他人无法访问网站(显然出于安全原因)。

您可以使用当前代码对此进行调整，以允许它根据文本区域的更改自动保存，就像您已经拥有的那样，但现在，它是通过激活按钮来保存的，如下所示。

<button id="saveBtn">Save Text</button>

$(document).ready(function () {
    var savesbtn = document.getElementById("saveBtn");

    //FILL TEXT AREAS WITH NOTES
    for (var i = 1; i < 11; i++) {
      $("#container_" + i).val(localStorage.getItem("textCopy" + i)); /* Most of this simply adds a
1/2/3/4 etc if your ID is so, and saves it under that number, henceforth auto-adjusting per textarea,
henceforth only requiring 1 save, instead of many. */
    }

    function saveNotes() { // Saves the current value of the inputs.
      // Save data to localstorage
      for (var i = 1; i < 11; i++) {
        localStorage.setItem("textCopy" + i, $("#container_" + i).val());
      }
    };
    savesbtn.addEventListener("click", saveNotes);
});

如果仍然无法从本地存储加载，最好的办法是尝试其他存储形式，SQL 或其他形式。

这也是我如何使用它的一个很好的例子(如果效果不佳，我很抱歉，我没有为每种屏幕类型正确设置尺寸，到目前为止它真的只在我的屏幕上看起来不错。):https://codepen.io/SkylerSpark/pen/KjodVe