如何在本地存储中存储完整的div [英] How to store a complete div in localstorage

问题描述

我正在尝试创建一个基本的文本注释器. 我想将带有所有标签的带注释文本(完整的div)保存在本地存储中. 到目前为止，我的方法还很幼稚，我想理解为什么它不起作用.您的帮助将不胜感激！

I'm trying to create a basic text annotator. I would like to save the annotated text (a complete div) with all the tags inside in local storage. My approach is pretty naive so far, and I would like to understand why it does not work. Your help would be much appreciated!

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

Below is the function I use to save the entire DIV to localstorage. I tried two approachs, one without turning the div into a JSON, the other one without.

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.

When i save to local storage annotated text, the value saved is just HTML element. When i save to local storage the stringified version of the annotated text, it saves an empty JSON.

我想了解:

• 为什么我不能对整个div进行分类.
• 为什么我无法保存整个div.

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

If none of the two are possible, what would be the best approach to save the new annotated text and retrieve it?

例如，我要保存的DIV是这个:

For example, the DIV i'm trying to save is this one :

<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>

谢谢！

推荐答案

它不起作用，因为JSON.stringify不是序列化div的正确方法. JSON.stringify仅包含对象的拥有"属性，但是您在div上关心的属性(主要是innerHTML或outerHTML)是继承的，而不是拥有"的.

It doesn't work because JSON.stringify isn't the correct way to serialize a div. JSON.stringify only includes the object's "own" properties, but the properties you care about on a div (primarily innerHTML or outerHTML) are inherited, not "own".

相反，您可能要保存outerHTML:

localStorage.setItem(key, annotatedtext.outerHTML);

...或者可能是innerHTML.

侧面说明:您对浏览器是否具有localStorage的检查不正确.如果完全未声明localStorage，则if (localStorage)将引发错误(因为在没有本地存储的浏览器中).您可能想要if (typeof localStorage !== "undefined")，它不会抛出，但是如果完全未声明localStorage，则将为true.

Side note: Your check for whether the browser has localStorage is incorrect. if (localStorage) will throw an error if localStorage is completely undeclared (as it will be in a browser without local storage). You probably wanted if (typeof localStorage !== "undefined"), which won't throw, but will be true if localStorage is completely undeclared.

但是，由于私有浏览在某些浏览器上的工作方式有些奇怪，因此即使进行这种检查也不足以处理您是否可以使用本地存储.要知道您是否可以使用本地存储:

But even that check isn't thorough enough to handle whether you can use local storage, because of the somewhat odd ways private browsing works on some browsers. To know whether you can use local storage:

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) {
}

这篇关于如何在本地存储中存储完整的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！