如何將創建的 div 存儲在 localStorage 中？

Question

我想在單擊后創建一個 div 並將創建的 div 存儲在localStorage中。

b.addEventListener('click', addDiv);

function addDiv() {
  var div = document.createElement('div');
}

Answer 1

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

我已經更新了我的答案。 請立即檢查。 希望這有幫助。 謝謝！

Answer 2

從以上評論...

“@AlvéMonke ...幾乎正確。OP 需要編寫一個序列化程序，描述如何創建 html 元素，例如通過編寫 JSON 可序列化數據格式。然后可以將這種格式的 JSON 字符串化值存儲到存儲中並從存儲中檢索. 然后可以將恢復/解析的數據格式發送到反序列化器（也需要編寫），該反序列化器會根據數據創建適當的 html 元素。” ——彼得·塞利格

“@PeterSeliger 你能把你的答案編碼嗎？” ——user16846263

窮人的方法雖然可靠，但將使用Element.outerHTML進行序列化（存儲）以及更高級的DOMParser.parseFromString進行反序列化（檢索/解析）。

 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>

編輯

原因之一可能是為 DOM 元素提供了自己的與 JSON 兼容的序列化格式，其中需要為后者編寫序列化和反序列化/解析過程。

 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>