保存一些 contenteditables localstorage - - -

Question

我正在尝试将多个 contenteditable 内容条目保存到我的本地存储中以用于 Chrome 扩展。我当前的代码只保存了一个 contenteditable 部分，但是当我尝试添加一个单独的 contenteditable 部分的另一个 Id 时，它要么删除所有保存的信息，要么根本不做任何事情。我是 JS 的新手，所以我希望我只是犯了一个简单的错误。我的 html 看起来像这样：

<div id = "content">
<div id= "tcontent" contenteditable="true" data-ph=" Make a note . . . "
style= "height: 300px; overflow: auto"></div>
<div id = "content2">
<div id= "tcontent2" contenteditable="true" data-ph= " Make a note . . . "
style= "height: 300px; overflow: auto"></div>
</div>

这是我的 Javascript:

window.addEventListener('load', onLoad); function onLoad() {
checkEdits();
}
function checkEdits() {
if(localStorage.userEdits!=null) {
    document.getElementById("tcontent", "tcontent2").innerHTML += localStorage.userEdits;
}
};

document.onkeyup = function (e) {
e = e || window.event;
console.log(e.keyCode);
      saveEdits();

};
function saveEdits() {
var editElem = document.getElementById("tcontent", "tcontent2");
var userVersion = editElem.innerHTML;
localStorage.userEdits = userVersion;
};

基本上这段代码只会保存一个（我先放在getElementbyId中的内容）。没有办法保存两个“内容”吗？我一直在玩弄我对 javascript 的所有了解，但似乎看不出我做错了什么或我应该在这里做什么。

非常感谢您的帮助。

Answer 1

document.getElementById 是一种只接受一个元素的 id 的方法。您当前正在尝试将两个字符串传递给该方法。那是行不通的。

请参阅此处的文档：https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

此外，您必须将每个元素的 innerHTML 分别分配给 localStorage 中的每个保存内容。

假设您对这门语言还很陌生，我不想让您的答案过于复杂。话虽如此，请在下面找到您的代码并进行一些修改，以便能够分别将两部分保存在 localStorage 中：

window.addEventListener('load', onLoad); function onLoad() {
    checkEdits();
}

function checkEdits() {
    if(localStorage.userEdits1!=null) {
        document.getElementById("tcontent").innerHTML = localStorage.userEdits1;
    }

    if(localStorage.userEdits2!=null) {
        document.getElementById("tcontent2").innerHTML = localStorage.userEdits2;
    }
};

document.onkeyup = function (e) {
    e = e || window.event;
    console.log(e.keyCode);
    saveEdits();
};
function saveEdits() {
    var editElem1 = document.getElementById("tcontent");
    var editElem2 = document.getElementById("tcontent2");

    localStorage.userEdits1 = editElem1.innerHTML;
    localStorage.userEdits2 = editElem2.innerHTML;
};

保存一些 contenteditables localstorage - - -

Saving some contenteditables localstorage - - -

html

javascript

local-storage