javascript - 提交时将表单更改保存到本地

我有一个<select>元素，我想使用它来更改网页的背景。我有成功更改背景的方法（尽管以非常微不足道的方式），我想知道是否存在一种简单的方法来“保存”此内容，以便每当用户离开并返回网页时，背景就是他们选择。

我正在修补Cookie和localStorage来完成此任务，但没有任何工作。

JSFiddle here

HTML：

<select id="settingBackground">
    <option name="default">Default</option>
    <option name="thankshaking">Background 2</option>
</select>

JavaScript：

$(document).ready(function () {
    $('#settingBackground').on('change', function () {
        if (this.value == "Default") {
            // Change background
            $('body').css("background", "#1e8cd4");
            $('body').css("color", "#fff");
        } else if (this.value == "Background 2") {
            // Change background
            $('body').css("background", "url('http://i.imgur.com/cV7PKqh.jpg') no-repeat center center fixed");
            $('body').css("background-size", "cover");
            $('body').css("color", "#000");
        }
    });
});

最佳答案

您可以按以下方式使用localStorage：

$(document).ready(function () {
  var selectedBG = localStorage.getItem("selectedBg");
  if (selectedBG) switchBg(selectedBG);
  $('#settingBackground').on('change', function () {
    localStorage.setItem("selectedBg", this.value);
    switchBg(this.value);
  });

  function switchBg(bg) {
    if (bg == "Default") {
        // Change background
        $('body').css("background", "#1e8cd4");
        $('body').css("color", "#fff");

    } else if (bg == "Background 2") {
        // Change background
        $('body').css("background", "url('http://i.imgur.com/cV7PKqh.jpg') no-repeat center center fixed");
        $('body').css("background-size", "cover");
        $('body').css("color", "#000");
    }
  }
});

Updated Fiddle

但是，请确保在使用前localStorage存在。