así que estoy tratando de guardar el selector de color en el almacenamiento local para que guarde la selección de los usuarios después de actualizar la página
este es un fragmento de mi código hasta ahora, si elimino el código de almacenamiento local del script, cambiará de color pero no guardará la selección.
document.addEventListener('click', (e) => { const colorOption = e.target.closest('.color-option'); if (!colorOption) return; // unselect currently selected color options document.querySelectorAll('.color-option').forEach(colorOption => colorOption.classList.remove('is-selected')); colorOption.classList.add('is-selected'); const color = colorOption.dataset.color; let root = document.documentElement; root.style.setProperty('--primary-color', color); localStorage.setItem(".color-option", "--primary-color"); localStorage.getItem("--primary-color"); }); body { background-color: var(--primary-color); } .color-option { height:35px; width: 35px; list-style: none; border-radius: 4px; margin: 7px; transition: .2s; cursor: pointer; &:hover { box-shadow: 0 0 0 5px rgba(0,0,0,.2); } &.is-selected { transform: scale(1.1); box-shadow: 0 0 0 5px rgba(0,0,0,.2); } } .color-option:nth-child(1) { background: #3485fd } .color-option:nth-child(2) { background: #002C5F } .color-option:nth-child(3) { background: #00AFD8 } .color-option:nth-child(4) { background: #5B1F69 } .color-option:nth-child(5) { background: #FF5F1F } .color-option:nth-child(6) { background: #ff00e2 } <body> <ul class="color-grid"> <li class="color-option is-selected" data-color="#3485fd"></li> <li class="color-option" data-color="#002C5F"></li> <li class="color-option" data-color="#00AFD8"></li> <li class="color-option" data-color="#5B1F69"></li> <li class="color-option" data-color="#FF5F1F"></li> <li class="color-option" data-color="#ff00e2"></li> </ul> </body>no puedo entender lo que estoy haciendo mal espero que alguien pueda ayudar
Ya casi estás ahí. Como señala la otra respuesta, en realidad no está almacenando el valor de color seleccionado.
Puede pensar en localStorage como un almacén de pares clave-valor. La sintaxis para establecer un elemento sería algo como:
localStorage.setItem(<key>,<value>)Donde tanto la clave como el valor son cadenas. Para almacenar la elección de color del usuario, tendría que hacer algo como:
localStorage.setItem("selectedColor","#adadad")Otra pieza que falta es quizás el código para cargar el color previamente seleccionado en la carga de la página.
PD: si está intentando ejecutar este código en un espacio aislado (como el editor de código de desbordamiento de pila), es posible que no pueda acceder a localStorage debido a las políticas de Cross Origin. El uso de localStorage en casos como este generará un error (que puede ser la razón por la que funciona si elimina la parte localStorage)
Vea la implementación de muestra a continuación:
const LS_COLOR_KEY = 'selected-color'; function selectColor(color){ document.querySelectorAll('.color-option').forEach(function(node){node.classList.remove('is-selected')}); document.querySelector('.color-option[data-color="'+color+'"]').classList.add('is-selected') document.documentElement.style.setProperty("--primary-color", color); localStorage.setItem(LS_COLOR_KEY, color); } document.addEventListener('DOMContentLoaded', function(){ // Retrieve and select any previously stored color const storedColor = localStorage.getItem(LS_COLOR_KEY) || '#577590'; selectColor(storedColor); }) document.addEventListener('click', function(e){ const colorOption = e.target.closest('.color-option'); if (!colorOption) return; selectColor(colorOption.dataset.color); }) :root { --primary-color: transparent; } .color-option > .swatch { height: 20px; width: 20px; margin: 0 0.25rem; display: inline-block; } .color-option { display: flex; align-items: center; margin: 0.25rem 0; padding: 0.5rem 0; cursor: pointer; } .color-option.is-selected{ border: 1px solid blue; } .selected-color { background: var(--primary-color); height: 100px; width: 100px; } <div class="options"> <ul id="color-list"> <li data-color="#577590" class="color-option"><div class="swatch" style="background:#577590"> </div>Queen Blue</li> <li data-color="#F3CA40" class="color-option"><div class="swatch" style="background:#F3CA40"></div>Maize Crayola</li> <li data-color="#F08A4B" class="color-option"><div class="swatch" style="background:#F08A4B"></div>Mango Tango</li> </ul> </div> <div class="selected-color"></div>¡No creo que consiga lo que quieres realmente! pero si desea almacenar el color seleccionado en el almacenamiento local y recuperarlo en cada carga, puede guardar el valor real del color y en cada carga, establecerá la propiedad raíz de (--primary-color) en el valor que almacenó. Como esto
En tu archivo js
let root = document.documentElement; document.addEventListener("click", (e) => { const colorOption = e.target.closest(".color-option"); if (!colorOption) return; // unselect currently selected color options document .querySelectorAll(".color-option") .forEach((colorOption) => colorOption.classList.remove("is-selected")); colorOption.classList.add("is-selected"); const color = colorOption.dataset.color; root.style.setProperty("--primary-color", color); localStorage.setItem("selected-color", color); }); window.onload = () => { root.style.setProperty( "--primary-color", localStorage.getItem("selected-color") ); };Espero que eso resuelva lo que quieres. Gracias
por favor verifique a continuación
localStorage.setItem('bgcolor', 'red'); localStorage.getItem('bgcolor');ahora mira tu código, has usado .color-option como keyName,
pero usó otro nombre clave en getItem --primary-color que es incorrecto.
localStorage.setItem(".color-option", "--primary-color"); localStorage.getItem("--primary-color");debería ser
localStorage.setItem(".color-option", "--primary-color-value"); localStorage.getItem(".color-option");