¿Cómo puedo cambiar los colores del sitio y guardar en localStorage?
Tengo una función en jQuery para permitir a los usuarios cambiar el color de fondo de mi sitio web. El problema es que, si actualizan, el color de fondo de la página vuelve automáticamente al valor predeterminado. ¿Cómo puedo usar localStorage con esta función jQuery?
$(document).ready(function() { /*-- Change color bg WPEAR.COM --*/ var resultPlaceholder = $('body'); var greenAndWhite = $('#green-and-white'); var redAndYellow = $('#red-and-yellow'); var blueAndPink = $('#blue-and-pink'); var yellowAndPink = $('#yellow-And-Pink'); greenAndWhite.click(function() { resultPlaceholder.css({ 'background': 'green' }); }); redAndYellow.click(function() { resultPlaceholder.css({ 'background': 'red' }); }); blueAndPink.click(function() { resultPlaceholder.css({ 'background': 'blue)' }); }); yellowAndPink.click(function() { resultPlaceholder.css({ 'background': 'yellow' }); }); }) /* -- change color wpear.com -- */ .button-wrapper { position: fixed; left: 0; display: grid; top: 40%; margin: 0; } .change-color { width: 40px; height: 40px; cursor: pointer; border: none; } #red-and-yellow { background: red; } #green-and-white { background: green; } #blue-and-pink { background: blue; } #yellow-And-Pink { background: yellow; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div class='button-wrapper'> <button class='change-color' id='green-and-white' /> <button class='change-color' id='red-and-yellow' /> <button class='change-color' id='blue-and-pink' /> <button class='change-color' id='yellow-And-Pink' /> </div>localStorage : function saveTheme(color) { localStorage.setItem('theme', color) } greenAndWhite.click(function(){ resultPlaceholder.css({'background':'var(--linear-graBO)'}); saveTheme('var(--linear-graBO)') }); // do this for each change<head> para que se ejecute de inmediato]: const savedTheme = localStorage.getItem('theme') if (savedTheme) { document.body.style.background = savedTheme }Para ir a lo que necesita, simplemente establezca el valor localStorage en el controlador de clics. Luego, vuelva a leerlo y configúrelo cuando se cargue la página:
También tenga en cuenta que su código JS se puede SECAR utilizando el mismo controlador de eventos para todos los elementos del button y configurando el fondo para que coincida con el botón en el que se hizo clic.
jQuery($ => { let $body = $('body'); let defaultBgColor = localStorage.getItem('body-bg-color'); defaultBgColor && $body.css('background-color', defaultBgColor); $('.change-color').on('click', e => { let bgColor = $(e.target).css('background-color'); $body.css('background-color', bgColor); localStorage.setItem('body-bg-color', bgColor); }); }); Finalmente, tenga en cuenta el uso de background-color , no background . Este último es un atajo y usarlo para establecer el color de fondo solo puede anular otros estilos relacionados con el fondo.
Aquí hay un ejemplo de jsFiddle que funciona, ya que los fragmentos de SO están en un espacio aislado y no permiten el acceso a localStorage.