Javascript 如何在localstorage中存储完整的div

我正在尝试创建一个基本的文本注释器。 我想将带注释的文本（一个完整的div）和所有标记保存在本地存储中。 到目前为止，我的方法相当幼稚，我想理解为什么它不起作用。非常感谢您的帮助

下面是我用来将整个DIV保存到localstorage的函数。我尝试了两种方法，一种没有将div转换成JSON，另一种没有

function saveText() {
if (localStorage) {
    var key = "latest text annotated" ;
    var annotatedtext = document.getElementById("text");
    var annotatextTextStringified = JSON.stringify(annotatedtext);
    localStorage.setItem(key, annotatextTextStringified);
  }
else {
    console.log("Error: you don't have localStorage!");
  }
}

当我将注释文本保存到本地存储时，保存的值只是HTML元素。 当我将注释文本的字符串化版本保存到本地存储时，它会保存一个空JSON

我想了解：

• 为什么我不能把整个部门严格化
• 为什么我不能拯救整个部门

如果这两种方法都不可行，那么保存并检索新注释文本的最佳方法是什么

例如，我试图保存的DIV是：

<div id="text">
  <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra <span class="highlight" id="1">dictum</span> vel sit amet mi.
 </p>

Lorem ipsum dolor sit amet，是一位杰出的献身者。南康格玉米饼。
虎口浮雕和肘部浮雕同侧前庭；Nam ac dolor augue。
佩伦特斯·米米，劳里特·多洛·西特，乌尔特里斯·瓦里乌斯·里苏斯。Nam vitae iaculis Elite。
自由人之间的莫利斯阿利夸姆。苏打水放在老鼠身上。前庭和前庭的弧度不同，前庭的位置不同。

---

谢谢大家!

它不起作用，因为

JSON.stringify

不是序列化div的正确方法。

JSON.stringify

只包括对象的“自己的”属性，但是您在

div

上关心的属性（主要是

innerHTML

或

outerHTML

）是继承的，而不是“自己的”

相反，您可能希望保存

outerHTML

：

localStorage.setItem(key, annotatedtext.outerHTML);

…或者可能

innerHTML

---

旁注：您对浏览器是否具有

localStorage

的检查不正确<如果

localStorage

完全未声明，则code>if（localStorage）将抛出一个错误（就像在没有本地存储的浏览器中一样）。您可能想要

if（typeof localStorage！==“undefined”）

，它不会抛出，但如果

localStorage

完全未声明，则为true

但即使是这样的检查也不足以处理您是否可以使用本地存储，因为在某些浏览器上，私人浏览的工作方式有些奇怪。要了解是否可以使用本地存储，请执行以下操作：

var canUseStorage = false;
try {
    var key = "test" + Date.now() + Math.random();
    localStorage.setItem(key, key);
    if (localStorage.getItem(key) == key) {
        canUseStorage = true;
        localStorage.removeItem(key);
    }
}
catch (e) {
}

---

谢谢-是的，它成功了。我将进一步研究stringify方法。