Estoy tratando de alternar una vista entre el modo de vista de cuadrícula y de lista en mi página HTML de interfaz. Puedo hacer esto bien con la manipulación de clases dom y HTML al alternar "mostrar: ninguno" entre dos contenedores. Sin embargo, cuando voy a la siguiente página del producto (a través de la paginación) o cuando vuelvo a cargar la página, la vista predeterminada es la que aparece y no la que se activó por última vez. ¿Hay alguna forma de conservar la vista en caso de que se vuelva a cargar una página o cambie la paginación del producto? gracias.
aquí está el código dom que logra esto:
viewList.addEventListener('click', function() { this.classList.add('view__active'); viewGrid.classList.remove('view__active'); gridItem.classList.add('hidden'); listItem.classList.remove('hidden'); }); viewGrid.addEventListener('click', function() { this.classList.add('view__active'); viewList.classList.remove('view__active'); gridItem.classList.remove('hidden'); listItem.classList.add('hidden'); });Hasta ahora descubrí que tengo que usar localStorage para lograr esto. pero hay una mejor manera de hacer esto?
Esencialmente, lo que sucede es que cuando solicita algo del servidor, el servidor responde con un documento HTML y se ejecutan los scripts asociados con ese documento, por lo que cualquier JS ejecutado en la primera solicitud no está en contexto cuando la segunda solicitud (paginar o recarga).
Por lo tanto, necesita una forma de conservar la información en estas cargas de página. Para eso, tiene 3 opciones.
Utilice sessionStorage .
Usar almacenamiento local
Usar cookies .
De las 3 anteriores, la más fácil sería usar la opción 1 o la 2.
Respondiendo a tu comentario,
Además, si estoy usando localStorage, ¿qué estoy usando para almacenar el estado de vista?
No tengo muy claro qué quiere decir con "Qué está usando para almacenar el estado". Si su pregunta es sobre dónde se almacenan sus datos, no debe preocuparse, ya que esto lo maneja el navegador. Si su pregunta es sobre "Cómo" almacenarlo, puede consultar los documentos de MDN adjuntos en la opción 1 o 2. Esto es simplemente almacenar un par clave-valor como se muestra en los documentos localStorage.setItem('preferedView', 'grid'); Puede agregar esto a sus controladores de clic de la siguiente manera,
viewList.addEventListener('click', function() { this.classList.add('view__active'); viewGrid.classList.remove('view__active'); gridItem.classList.add('hidden'); listItem.classList.remove('hidden'); localStorage.setItem('preferedView', 'grid'); }); viewGrid.addEventListener('click', function() { this.classList.add('view__active'); viewList.classList.remove('view__active'); gridItem.classList.remove('hidden'); listItem.classList.add('hidden'); localStorage.setItem('preferedView', 'list'); }); Luego, al cargar una nueva página en la parte superior de su secuencia de comandos, puede obtener la vista preferida de los usuarios (si existe) a través de const preferedView = localStorage.getItem('preferedView');
Aquí hay un ejemplo completo de MDN
Para que alguien pueda encontrar una respuesta para una tarea similar, gracias a la información de @Umendra , pude resolver esto usando esto:
function viewToggeler(viewBtn1, viewBtn2, view1, view2, viewStord) { viewBtn2.classList.add('view__active'); viewBtn1.classList.remove('view__active'); view1.classList.add('hidden'); view2.classList.remove('hidden'); sessionStorage.setItem('preferedView', viewStord); } viewList.addEventListener('click', () => { viewToggeler(viewGrid, viewList, gridItem, listItem, 'list'); }); viewGrid.addEventListener('click', () => { viewToggeler(viewList, viewGrid, listItem, gridItem, 'grid'); }); if (sessionStorage.getItem('preferedView') === 'grid') { viewToggeler(viewList, viewGrid, listItem, gridItem, 'grid'); } else if (sessionStorage.getItem('preferedView') === 'list') { viewToggeler(viewGrid, viewList, gridItem, listItem, 'list'); }Terminé usando sessionStorage sobre localStorage porque se vacía solo al cerrar la ventana/pestaña, lo que podría ser el resultado más deseable. localStorage persiste incluso después de salir del navegador y volver a abrirlo.
Además, en cualquier momento, alguien quiere vaciar el almacenamiento de sesión al salir, usé:
window.addEventListener('onbeforeunload', () => { sessionStorage.removeItem('preferedView'); });