Estoy aprendiendo js.
Quiero mostrar el li guardado con localStorage creado con appendChild cuando recargo la página.
<ul id="gfg"> <li>Computer Network</li> <li>Data Structures</li> </ul> <button onclick="test()">Submit</button> function test() { var node = document.createElement('li'); node.textContent = 'Hi'; abc = document.getElementById('gfg').appendChild(node); //localStorage localStorage.setItem('abc', 'abc'); let a = localStorage.getItem('abc'); console.log(abc); }Podemos usar un par de funciones para trabajar con sus artículos en el almacenamiento:
function getStorageItems() { var data = localStorage.getItem('items'); return data ? JSON.parse(data) : null; } function saveStorageItem(text) { var array = getStorageItems() || []; array.push(text); localStorage.setItem('items', JSON.stringify(array)); }Con estas funciones puede guardar y cargar una matriz de texto (el texto de cada li). En el almacenamiento, guardamos un texto, estas funciones también convierten/analizan su matriz en un texto JSON.
Podemos crear otra función para agregar un elemento li a su página:
function addItem(text, save) { var node = document.createElement('li'); node.textContent = text; document.getElementById('gfg').appendChild(node); if (save !== false) saveStorageItem(text); }Por defecto, guardamos en el almacenamiento el texto. Solo si pasamos save=false, omitimos la acción de guardar. En este formulario, podemos agregar y guardar un elemento y también solo agregar (sin guardar).
Su función de prueba, en este formulario, agregue y guarde el elemento:
function test() { addItem("Hi"); }Y una última función para cargar elementos desde el almacenamiento:
function loadFromStorage() { var array = getStorageItems(); if (array) { for (var i = 0; i < array.length; i++) addItem(array[i], false); } }Aquí usamos falso en addItem porque solo queremos agregar el elemento, no guardarlo nuevamente. Puede invocar loadFromStorage para cargar sus elementos guardados.
NOTA: aquí solo guardo el texto porque es el único dato requerido para crear tu HTML. Si necesita más datos, le sugiero que use un objeto y guarde/cargue este objeto serializado de la misma manera o el HTML.