3

I want to create a div after a click and store the created div in localStorage.

b.addEventListener('click', addDiv);

function addDiv() {
  var div = document.createElement('div');
}
5
  • You need to stringify the HTML DOM element and then set that string to localStorage, using its setItem method. Then, when you want to retrieve it, you can use localStorage.getItem("element") and then JSON.parse it.
    – HerrAlvé
    Jul 8, 2022 at 10:34
  • 3
    @AlvéMonke ... almost correct. The OP needs to write a serializer which describes how an html element gets created e.g. by writing a JSON serializable data format. The JSON stringified value of this format then can be stored into and retrieved from the storage. The restored/parsed data format then can be send to a deserializer (needs to be written too) which upon the data does create an appropriate html element. Jul 8, 2022 at 10:48
  • @PeterSeliger can you please code your answer? Jul 8, 2022 at 13:08
  • You would be better to write what data you want to store vs the actual HTML. What data in that div is important. Store an array of objects with the data. When page loads, you can loop over the data and rebuild the elements. Jul 8, 2022 at 15:15
  • @user16846263 ... From the so far provided answers / approaches are there any questions left? Sep 16, 2022 at 15:12

2 Answers 2

1

From the above comments ...

"@AlvéMonke ... almost correct. The OP needs to write a serializer which describes how an html element gets created e.g. by writing a JSON serializable data format. The JSON stringified value of this format then can be stored into and retrieved from the storage. The restored/parsed data format then can be send to a deserializer (needs to be written too) which upon the data does create an appropriate html element." – Peter Seliger

"@PeterSeliger can you please code your answer?"" – user16846263

A poor man's approach, though reliable, would be the usage of Element.outerHTML for serializing (storing) together with the more advanced DOMParser.parseFromString for deserializing (retrieving / parsing).

function putSerializedElementIntoStorage(storage, key, elmNode) {
  // serialization.
  const value = elmNode?.outerHTML ?? '';
  
  // storage.
  storage.setItem(key, value);
}
function getParsedElementFromStorage(storage, key) {
  return (new DOMParser())
    // deserialization ...
    .parseFromString(
      // ... from storage.
      storage.getItem(key) ?? '',
      "text/html",
    )
    .body
    // parsed element.
    .firstElementChild;
}

document
  .querySelector('#save-element-markup')
  .addEventListener('click', ({ currentTarget }) =>

    putSerializedElementIntoStorage(
      mock.localStorage,
      currentTarget.id,
      currentTarget,
    )
  );
document
  .querySelector('#watch-stored-markup')
  .addEventListener('click', ({ currentTarget }) =>

    console.log({
      storedMarkup: mock
        .localStorage
        .getItem(currentTarget.dataset.storageKey),
    })
  );
document
  .querySelector('#append-parsed-element')
  .addEventListener('click', ({ currentTarget }) => {

    const elmNode = getParsedElementFromStorage(
      mock.localStorage,
      currentTarget.dataset.storageKey,
    );
    if (elmNode) {
      document
        .body
        .appendChild(elmNode);
    }
  });
button { display: block; margin: 3px 10px; }
button:nth-child(1) { margin: 0 15px 12px;}
button:nth-child(2), button:nth-child(3) { margin: 6px 15px; }
hr { position: relative; left: -25%; width: 48%; }
.as-console-wrapper { left: auto!important; width: 50%; min-height: 100%; }
<button id="save-element-markup">
  <em>save</em>
  my markup
</button>

<button
  id="watch-stored-markup"
  data-storage-key="save-element-markup"
  >
  <em>watch</em> stored markup
</button>
<button
  id="append-parsed-element"
  data-storage-key="save-element-markup"
  >
  <em>append</em>
  element, parsed from saved markup
</button>

<hr/>

<script>
  // mock for the SO specific stack snippet
  // due to the policies and environment are
  // not allowing an original storage access.
  const mock = {
    localStorage: (function () {

      // https://developer.mozilla.org/en-US/docs/Web/API/Storage
      // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map
      const storage = new Map;

      function key(int) {
        return [
          ...storage.keys()
        ][parseInt(int, 10)];
      }

      function setItem(key, value) {
        return storage.set(String(key), String(value));
      }
      function getItem(key) {
        return storage.get(String(key));
      }

      function removeItem(key) {
        return storage.delete(String(key));
      }

      function clear() {
        return storage.clear();
      }

      return {
        get length() {
          return storage.size;
        },
        key,
        getItem,
        setItem,
        removeItem,
        clear,      
      };

    }()),
  }
</script>

Edit

One of cause could come up with an own JSON compatible serialization format for DOM elements, where one needs to write a serializing and a deserializing/parse process for the latter.

function serializeElementNode({
  nodeName = '',
  attributes = [],
  childNodes = [],
}) {
  return {
    type: 'element',
    name: nodeName.toLowerCase(),
    ...(
      attributes.length !== 0
      && {
        attributes: Object
          .values(attributes)
          .map(({ nodeName: key, nodeValue: value }) =>
            ({ /*type: 'attribute', */key, value })
          )
      } || {}
    ),
    ...(
      childNodes.length !== 0
      && {
        childNodes: [...childNodes]
          .map(serializeDomNode)
      } || {}
    ), 
  };
}
function serializeTextNode({ nodeValue: value = '' }) {
  return {
    type: 'text',
    value,
  };
}
function serializeDomNode(node) {
  return ({

    1: serializeElementNode,
    3: serializeTextNode,

  })[node?.nodeType]?.(node);
}

function parseElementNode({
  name = 'unknown-element',
  attributes = [],
  childNodes = [],
}) {
  const elmNode = attributes
    .reduce((node, { key, value }) => {

      node.setAttribute(key, value);
      return node;

    }, document.createElement(name));

  return childNodes
    .reduce((rootNode, node) => {

      rootNode
        .appendChild(
          parseDomNode(node)
        );
      return rootNode;

    }, elmNode);
}
function parseTextNode({ value = '' }) {
  return document.createTextNode(value);
}
function parseDomNode(node) {
  return ({

    element: parseElementNode,
    text: parseTextNode,

  })[node?.type]?.(node);
}

function putSerializedElementIntoStorage(storage, key, elmNode) {
  // serialization.
  const value = JSON.stringify(serializeDomNode(elmNode));

  // storage.
  storage.setItem(key, value);
}
function getParsedElementFromStorage(storage, key) {
  // deserialized/parsed element ...
  return parseDomNode(
    JSON.parse(
      // ... from storage.
      storage.getItem(key) ?? null
    )
  );
}

document
  .querySelector('#save-serialized-element')
  .addEventListener('click', ({ currentTarget }) =>

    putSerializedElementIntoStorage(
      mock.localStorage,
      currentTarget.id,
      currentTarget,
    )
  );
document
  .querySelector('#watch-serialized-element')
  .addEventListener('click', ({ currentTarget }) => {

    const serializedElementString = mock
      .localStorage
      .getItem(currentTarget.dataset.storageKey);

    console.log({
      serializedElementString,
      ... (
        serializedElementString && {
          serializedElement: JSON.parse(serializedElementString)
        } || {}
      ),
    });
  });
document
  .querySelector('#append-parsed-element')
  .addEventListener('click', ({ currentTarget }) => {

    const elmNode = getParsedElementFromStorage(
      mock.localStorage,
      currentTarget.dataset.storageKey,
    );
    if (elmNode) {
      document
        .body
        .appendChild(elmNode);
    }
  });
button { display: block; margin: 3px 10px; }
button:nth-child(1) { margin: 0 15px 12px;}
button:nth-child(2), button:nth-child(3) { margin: 6px 15px; }
hr { position: relative; left: -25%; width: 48%; }
.as-console-wrapper { left: auto!important; width: 50%; min-height: 100%; }
<button id="save-serialized-element">
  <em>serialize and save</em>
  this element
</button>

<button
  id="watch-serialized-element"
  data-storage-key="save-serialized-element"
  >
  <em>watch</em> stored serialized element
</button>
<button
  id="append-parsed-element"
  data-storage-key="save-serialized-element"
  >
  <em>append</em>
  parsed node from stored serialization
</button>

<hr/>

<script>
  // mock for the SO specific stack snippet
  // due to the policies and environment are
  // not allowing an original storage access.
  const mock = {
    localStorage: (function () {

      // https://developer.mozilla.org/en-US/docs/Web/API/Storage
      // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map
      const storage = new Map;

      function key(int) {
        return [
          ...storage.keys()
        ][parseInt(int, 10)];
      }

      function setItem(key, value) {
        return storage.set(String(key), String(value));
      }
      function getItem(key) {
        return storage.get(String(key));
      }

      function removeItem(key) {
        return storage.delete(String(key));
      }

      function clear() {
        return storage.clear();
      }

      return {
        get length() {
          return storage.size;
        },
        key,
        getItem,
        setItem,
        removeItem,
        clear,      
      };

    }()),
  }
</script>

0
    b.addEventListener('click', addDiv);
    function addDiv() {
        var div = document.createElement('div');
        div.innerHTML = "Content to be add and get from localStorage!"
        localStorage.setItem("contentDiv",div.outerHTML);
    }

To Retrieve can use like:

    function getStoaregeDate(){
         document.getElementById("elementId").innerHTML = 
        localStorage.getItem("contentDiv");
    }

I have updated my answer. Please check now. Hope this help. Thanks!

4
  • 3
    Was the proposed solution/code ever tried/tested before being posted? localStorage is an entirely string based storage. The return value of localStorage.getItem("contentDiv") will always be '[object HTMLDivElement]' since localStorage.setItem("contentDiv", div) will do a toString coercion to the div node reference prior to storing it. Jul 8, 2022 at 10:08
  • 2
    And whoever gave an upvote on the above answer was doing this blindly, either not knowing the specification or not giving the solution a try. Jul 8, 2022 at 10:11
  • Updated my answer. Please check now. Thanks!
    – Vivek
    Jul 9, 2022 at 11:11
  • checked, voting revoked. Jul 12, 2022 at 7:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.