Estoy tratando de almacenar una matriz que contiene elementos DOM en localStorage. No puedo agregar los elementos que almaceno en la matriz cuando los almaceno/obtengo de localStorage. Pero actualmente, mi programa funciona si no uso localStorage, y puedo agregar los elementos de la matriz completamente bien. Aquí hay un ejemplo que acabo de escribir rápidamente que me daría un error al usar localStorage. ¿Cuál es la causa de este error?
**html** <div class = "container"> <div class = "stuff"> Store this text </div> </div> <div class = "storeHere"> **index.js** let arr = []; if (localStorage.length == 0) localStorage.setItem("arr", JSON.stringify(arr)); else { //psuedocode: Calling the imported method in "other.js" } **other.js** method() { let temp = []; temp = JSON.parse(localStorage.getItem("arr")); temp.push(document.querySelector(".stuff"); localStorage.setItem("arr", JSON.stringify(temp)); const storeHere = document.querySelector(".storeHere"); storeHere.appendChild(temp[0]); //Error, not of type Node }Ponga solo valores serializables en el almacenamiento. Los elementos no son serializables.
Si desea almacenar Store this text , almacene solo ese texto. Si los valores dinámicos incluyen elementos anidados, construya esos elementos anidados cuando sea necesario o almacene la cadena HTML completa y establezca el .innerHTML del contenedor.
Aquí, el elemento secundario de .stuff es solo una cadena simple, así que solo almacene esa cadena.
// store string localStorage.stuffText = document.querySelector('.stuff').textContent; // retrieve string and put into DOM if (localStorage.stuffText) { document.querySelector('.stuff').textContent = localStorage.stuffText; // or if you want to put it into a .storeHere element, use that selector instead }Si desea almacenar una serie de cadenas, entonces tal vez algo como
const storedArr = localStorage.arr ? JSON.parse(localStorage.arr) : []; // store string storedArr.push(document.querySelector('.stuff').textContent); localStorage.stuffText = JSON.stringify(storedArr); // retrieve string and put into DOM if (localStorage.arr) { const storedArr = JSON.parse(localStorage.arr); for (const item of storedArr) { document.querySelector('.stuff').textContent = item; } // or if you want to put it into a .storeHere element, use that selector instead }El elemento HTML no se puede serializar, por lo que localStorage no puede almacenarlo. Debe serializarlo en una cadena antes de guardarlo. Recomiendo usar element.outerHTML con JSON.stringify .
Código de ejemplo en su caso con matriz:
// Serialize const arr = [] // convert to string const elementAsString = document.querySelector('div').outerHTML // add to your current array arr.push(elementAsString) // use JSON.stringify to keep correct array format in localStorage localStorage.setItem('arr', JSON.stringify(arr)) // Deserialize const saveArr = JSON.parse(localStorage.getItem('arr')) // we need create an empty element first const e = document.createElement('div') // append element to a parent before set outerHTML document.body.append(e) // set HTML for it e.outerHTML = saveArr[0]Solo necesita reemplazar estas dos líneas y sus errores se solucionarán.
Dentro de la función other.js method() :-
function method () { //temp.push(document.querySelector(".stuff")); temp.push(document.querySelector(".stuff").outerHTML); //storeHere.appendChild(temp[0]) storeHere.innerHTML += temp[0]; }Explicación
HTMLNode (que es devuelto por document.querySelector ) porque no es una cadena, pero podemos obtenerlo como una cadena usando su propiedad outerHTML .HTMLNode en el arr y lo configura en localStorage como cadena, entonces localStorage.getItem("arr") devuelve "[ '[object HTMLNode]' ]" como una cadena que analizó como una matriz. Hace temp[0] = '[object HTMLNode]' , que es una cadena (no el HTMLNode ), que le da el error al agregarlo como un nodo secundario (que mencionó en el comentario) .Tardé un poco en responder porque algo surgió cuando estaba escribiendo la respuesta 😅