首页 > 解决方案 > 如何将本地存储中的任何内容加载到不同的页面

问题描述

我正在使用contenteditable,我想通过使用本地存储将我在其中写入或上传的所有内容移动到另一个页面。

所以可以说这是第一页,contenteditable当点击发布按钮时,它会将所有内容保存到本地存储并将其加载到第二页,即 view.html

post.html

<div id="editor1" contenteditable="true"  class="editable" ></div>

<button id="publishDoc">Publish</button>

我想加载我添加到的内容的第二页contenteditable

视图.html

<div class="post-body" id="postbody">

</div>

我有这个代码保存到本地存储,但在同一页面中加载它。但我希望它加载到另一个页面

JS

const editables = document.querySelectorAll("[contenteditable]");

// save edits
editables.forEach(el => {
  el.addEventListener("blur", () => {
    localStorage.setItem("dataStorage-" + el.id, el.innerHTML);
  })
});

// once on load
for (var key in localStorage) {
  if (key.includes("dataStorage-")) {
    const id = key.replace("dataStorage-","");
    document.querySelector("#" + id).innerHTML = localStorage.getItem(key);
  }
}

希望任何人都可以帮助我。谢谢你。

标签: javascripthtmljsonlocal-storage

解决方案


推荐阅读