javascript - 我如何允许用户使用颜色选择器选择我网站的背景颜色并存储它？

Question

<input name="Color Picker" id="picker" onclick="setColor()" type="color" />

function setColor() {
  getColor();
  if (localStorage.getItem('background') !== null) {
    getColour = localStorage.background;
    $('body').css('background', getColour);
  }
}

function getColor() {
  localStorage.getItem('background') = picker;

}

我想获取自定义颜色的用户输入并相应地更新网站背景。

Answer 1

Stackoverflow 片段似乎不喜欢使用 localStorage 所以这里是一个如何读写颜色的例子。我注释掉了供您在应用程序中使用的本地存储代码，而不是我用来演示代码的临时变量。

下面的示例使用 onchange 并在加载时存储当前颜色，有一个默认颜色，您可以点击一个按钮应用它，还有另一个按钮来应用存储/选择的颜色。

var defaultColor = '#00ff00';
var tempStorage;

function setColor() {
  //localStorage.setItem('background', $('#picker').val());
  tempStorage = $('#picker').val();
  $('body').css('background-color', tempStorage);
  applyBackgroundColor(tempStorage);
}

function getColor() {
  //localStorage.getItem('background');
  $('#picker').val(tempStorage);
  applyBackgroundColor(tempStorage);
}

function getDefaultColor() {
  $('#picker').val(defaultColor);
  applyBackgroundColor(defaultColor);
}

function applyBackgroundColor(colorValue){
  $('body').css('background-color', colorValue);
}

setColor();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="Color Picker" id="picker" onchange="setColor()" type="color" />
<button onclick="getDefaultColor()">Apply Default</button>
<button onclick="getColor()">Apply Stored</button>

Please note I used your own syntax and tried changing as little as possible to your original code, i.e: How you call the methods inline, etc..

Though in general I would recommend to not use inline bindings but use jQuery $(element).on('event', function(){}) instead. i.e: $(#picker).on('change', setColor)