Por ejemplo, tengo algunos artículos cuyo estado es completado y tienen clase completada
<body onload="loadItem()"> <ol class="list-group"> <li class="list-group-item completed" id="item-1">Text1</li> <li class="list-group-item completed" id="item-2">Text2</li> </ol> </body>Además, hay dos botones.
<button type="button" onclick="showItem();" class="btn btn-outline-primary">Show completed</button> <button type="button" onclick="hideItem();" class="btn btn-outline-primary">Hide completed</button>Y funciones JavaScript
function hideItem() { var targList = document.getElementsByClassName("completed"); var hidden_ids = [] for (var x = 0; x < targList.length; x++) { targList[x].setAttribute('style', 'display: none !important'); hidden_ids.push(targList[x].id) } localStorage.setItem("autosave", JSON.stringify(hidden_ids)); } function loadItem() { var hidden_ids = JSON.parse(localStorage.getItem("autosave") || '[]'); for (var x = 0; x < hidden_ids.length; x++) { document.getElementById(hidden_ids[x]).setAttribute('style', 'display: none !important'); } } function showItem() { var targList = document.getElementsByClassName("completed"); var hidden_ids = [] for (var x = 0; x < targList.length; x++) { targList[x].setAttribute('style', 'display: flex'); hidden_ids.push(targList[x].id) } localStorage.setItem("autosave", JSON.stringify(hidden_ids)); }Pero no funciona. En la recarga de la página, solo oculta los elementos completados. Sin embargo, quiero que se muestre como predeterminado y si presiono el botón Ocultar , debería ocultarse incluso después de recargar la página.
En lugar de almacenar identificaciones, ¿tal vez podría usar esta solución? Si entiendo tu pregunta correctamente, podría ser de ayuda.
function loadItem() { if (localStorage.getItem('hide')) { hideItem() } } function showItem() { localStorage.removeItem('hide') document.querySelectorAll('.completed').forEach(li => li.style.display = 'list-item') } function hideItem() { localStorage.setItem('hide', true) document.querySelectorAll('.completed').forEach(li => li.style.display = 'none') }