如何使用 Javascript 保存 CSS 更改？

Posted 2023-05-07

【中文标题】如何使用 Javascript 保存 CSS 更改？

【英文标题】：How can I save CSS changes with Javascript?

【发布时间】：2018-01-19 21:46:29

【问题描述】：

我创建了一个页面，人们可以在其中使用 javascript 自行更改背景。但是当我在页面之间交换时，设置就消失了。我怎样才能解决这个问题：“html”、“CSS”和“JAVASCRIPT”？

这是我的html代码：

<input type="image" id="bc-wood-button" src="images/background-wood.jpg"  >
<input type="image" id="bc-nature-button" src="images/background-nature.jpg"  >

这是我的 Javascript：

$(document).ready(function() 
    $('body').css('background-image', 'url("images/background-wood.jpg")');
    document.getElementById("bc-wood-button").addEventListener("click", WoodenBackground);
    document.getElementById("bc-nature-button").addEventListener("click", NatureBackground);

    function WoodenBackground() 
        $('body').css('background-image', 'url("images/background-wood.jpg")');
    

    function NatureBackground() 
        $('body').css('background-image', 'url("images/background-nature.jpg")');
    
);

【问题讨论】：

你试过cookies、localStorage还是sessionStorage？

存储在localStorage，当你进入一个新页面时，从存储中取出它并重新设置CSS。

保存在哪里？到你的服务器？那将需要一些服务器端编程。不过，您可以使用localStorage 在客户端机器上保存一些信息。

【参考方案1】：

正如 cmets 中的其他建议，您可以使用 localStorage 或 sessionStorage 来保存和加载数据。

$(document).ready(function()

  // ulrs of some existing backgrounds          
  var backgrounds = 
    wood: "https://images.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.walldevil.com%2Fwallpapers%2Fa81%2Fwallpapers-dragon-art-yellow-artistic-silver-images-backgrounds-nature-abstract-background-desktop-cool.jpg&f=1",
    nature: "https://images.duckduckgo.com/iu/?u=https%3A%2F%2Fimage.freepik.com%2Ffree-photo%2Fnature-design-with-bokeh-effect_1048-1882.jpg&f=1"
  ;

  var settings = loadSettings();
  setBackground(settings.background);  

  document.getElementById("bc-wood-button").addEventListener("click", WoodenBackground);
  document.getElementById("bc-nature-button").addEventListener("click", NatureBackground);

  function setBackground(background) 
    $('body').css('background-image', 'url("'+background+'")');
    localStorage.setItem("settings.background", background);
  

  function WoodenBackground() 
    setBackground(backgrounds.wood);
  

  function NatureBackground()
  
    setBackground(backgrounds.nature);
  

  function loadSettings() 
  
    var background = localStorage.getItem("settings.background");
    // at first run there is no data, also user may anytime clear storage
    if (!background) 
    
      background =  backgrounds.wood;
    
    return  background: background 
  
);

jsfiddle