如何使用JavaScript保存CSS更改？

Question

I created a page where people can change te background by them self with javascript. But when I swap between pages, the setting is gone. How can I fix that WITH ONLY: "HTML", "CSS" and "JAVASCRIPT"?

This is my html code:

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

And this is my 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")');
    }
});

Answer 1

As other suggested in comments you can use localStorage or sessionStorage to save and load data.

$(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