How to store a complete div in localstorage

Question

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!

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!");
  }
}

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.

I would like to understand :

• why i can not stringify the whole div.
• why i can't save the whole div.

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

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>

Thank you !

Answer 1

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

Instead, you probably want to save outerHTML:

localStorage.setItem(key, annotatedtext.outerHTML);

...or possibly innerHTML.

---

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