Hola, hice este código js para cambiar la vista de Lista a Cuadrícula y lo contrario también, pero quiero mantener el estado de vista actual después de actualizar la página, he visto muchos videos que hablan sobre cookies y almacenamiento local, pero no sé como usarlos ya que aun soy principiante en programacion podrias decirme como hacerlo ?
secuencia de comandos.js:
let x = document.getElementById('x'); let z = document.getElementById('z'); x.addEventListener('click', function() { let className = z.className; if (className == 'list') { z.className = 'grid'; }else{ z.className = 'list'; } });índice.php:
<i class="" id="x"></i> <div class="list" id="z"> . centent . </div>localstorage se usa como pares clave-valor, siendo ambos siempre cadenas.
puede usar localStorage.setItem('view-setting', 'list') . esto creará una variable de almacenamiento local llamada view-setting y definirá su valor como list . Puede obtener los datos usando localStorage.getItem('view-setting'). De manera similar, los elementos se pueden eliminar usando localStorage.removeItem('view-setting').
Entonces, después de configurar la vista en localStorage, puede buscarla y, al volver a cargar, verifique su última etapa y agregue condicionales en HTTP en consecuencia.
Puede obtener más ayuda de:
Cargando JS LocalStorage en PHP Variable
o
https://www.w3schools.com/html/html5_webstorage.asp
Puedes:
localStorage let x = document.getElementById('x'); let z = document.getElementById('z'); let cl = localStorage.getItem("class"); if (cl !== z.className) z.className = cl; x.addEventListener('click', function() { let className = z.className; if (className == 'list') { z.className = 'grid'; }else{ z.className = 'list'; } localStorage.setItem("class", z.className); }); Dado que stackoverflow.com considera que la operación directa con localStorage no es segura, tuve que crear un Fiddle para la prueba de concepto. Ver aquí: https://jsfiddle.net/q68vnctL/
Puede probarlo ejecutándolo, haciendo clic en "¡Haz clic en mí!" tantas veces como quieras, vuelve a hacer clic en "Ejecutar" y verás que el color sigue siendo el que era.