How can i store the created div in localStorage?

Question

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');
}

user_2760635 · Answer

    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!

user_2627243 · Answer

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%; }

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%; }

How can i store the created div in localStorage?

2 Answers