0
449
Views¿Cómo guardar el estado en Localstorage?
Buenos dias quien esta leyendo este mensaje!
Todavía soy relativamente nuevo en la programación y tengo una pregunta... Hice una barra de navegación: body > div > nav > div > ul > li*10
Tengo el movimiento hecho en CSS
//Barra de Navegacion const list = document.querySelectorAll('.list'); function activeLink(){ list.forEach((item)=> item.classList.remove('active')); this.classList.add('active'); if(list.classlist.contains('active')){ localStorage.setItem('on','true'); } else{ localStorage.setItem('on','false'); } }; if (localStorage.getItem('on') === 'true'){ list.classList.add('active'); } else { list.classList.remove('active'); }; list.forEach((item)=> item.addEventListener('click',activeLink));El problema es que cuando actualizo la página o voy a otra parte de ella, no guarda los cambios. ¿Cómo podría hacerlo con localstorage?
He probado de varias formas y no encuentro la manera de hacerlo
¡Muchas gracias por adelantado!
3 answers
Answer question0
Creo que este código está demasiado abajo.
if (localStorage.getItem('on') === 'true'){ list.classList.add('active'); } else { list.classList.remove('active'); };Debe configurar este conjunto inmediatamente cuando se carga la página, inmediatamente después
const list = document.querySelectorAll('.list');Entonces la lista tiene la clase correcta desde el principio.
0
Dudo que usar localStorage sea la forma correcta de lograr lo que quieres hacer. Sugiero que cada página tenga su enlace resaltado cuando la abra. Esto se puede lograr agregando clases manualmente al enlace de cada página, teniendo en cuenta que no serían tantos enlaces en la navegación.
0
No estoy seguro de lo que está tratando de lograr con esta parte del código, pero la sintaxis que está utilizando es correcta. Aquí hay un ejemplo del uso de la API de almacenamiento local para repetir.
Puede guardar el par clave-valor en el almacenamiento local usando la sintaxis:
localStorage.setItem('key', 'value');Puede recuperar el valor guardado con la siguiente sintaxis:
localStorage.getItem('key');Si aún no puede hacer que el código funcione correctamente, puede intentar abrir las herramientas de desarrollo de su navegador y ver el almacenamiento. Si las herramientas de su desarrollador dicen que no hay entradas guardadas en el almacenamiento local, entonces sabe que el principal problema es guardar el par clave-valor.
Aquí se explica cómo abrir las herramientas para desarrolladores en Chrome:
- Primero presione F12 en su teclado (o Ctrl+Shift+J)
- Siga los pasos que se muestran en la siguiente imagen
Si aún no puede hacer que el código funcione, debe verificar la configuración de su navegador para asegurarse de que no haya configuraciones de seguridad habilitadas que impidan que su aplicación se guarde en el almacenamiento local.