javascript - 如何将本地存储中的任何内容加载到不同的页面
问题描述
我正在使用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);
}
}
希望任何人都可以帮助我。谢谢你。
解决方案
推荐阅读
- tcl - while循环中的tcl错误裸词“字符串”
- node.js - playwright - 并行从多个页面获取内容
- javascript - 为什么 iPhone Safari 15.1 无法在 webM 中加载
- reactjs - 反应路由器 v6 onclick
- javascript - 如何使用javascript获取for循环中的最后一个值?
- python - [None, 192] 的张量与 [1,128] 的张量相连接
- html - 使用 ngFor 将项目左对齐
- linux - 我的 ec2 linux 没有连接到互联网?
- php - PHP无法在命令行中连接oracle
- c# - 一个实体链接到多个实体 EF Core 5 代码优先