Question

我将此行添加到链接的onClick函数。

document.getElementById('a.'+id).style.color= '#414042';

当我点击该链接时，它的颜色会发生变化，但每当用户上线时我都需要保持这种颜色。在线用户时，他应该总是看到新颜色而不是旧颜色。当用户注销然后登录时他仍然应该看到他改变了新的颜色。我怎样才能做到这一点？在我的javascript函数中。

Answer 1

您可以记住web storage中的颜色。根据您的问题，我怀疑您需要localStorage，但如果您想要自动清理它，请改用sessionStorage。

保存（假设您需要将此id特定）：

localStorage.setItem("color." + id, theirColor);

获取（相同的假设）：

var theirColor = localStorage.getItem("color." + id) || defaultColor;

如果你有某些理由去除（同样的假设）：

localStorage.removeItem("color." + id);

示例（live copy on jsFiddle - 遗憾的是，Stack Snippets不允许使用网络存储空间）：

HTML：

<label>Pick a color:
  <select id="color-select">
    <option value="red">Red</option>
    <option value="blue">Blue</option>
    <option value="yellow">Yellow</option>
    <option value="green">Green</option>
  </select>
</label>
<div id="target">This is the text</div>

JavaScript的：

(function() {
  var color = localStorage.getItem("color") || "red";
  console.log("color = " + color);
  applyColor(color);
  $("#color-select").val(color).on("change", function() {
    var newColor = $(this).val();
    console.log("newColor = " + newColor);
    localStorage.setItem("color", newColor);
      applyColor(newColor);
  });
  function applyColor(color) {
    // Not using jQuery because you mentioned .style.color,
    // but the jQuery way would be $("#target").css("color", color);
    $("#target")[0].style.color = color;
  }
})();

原始示例，可能过于复杂（live copy on jsFiddle - 遗憾的是，Stack Snippets不允许使用网络存储空间）：

HTML：

<div>Pick a color:</div>
<div class="colors">
  <div data-color="red"></div>
  <div data-color="blue"></div>
  <div data-color="yellow"></div>
  <div data-color="green"></div>
</div>
<div>Your selected color is shown with a heavy outline.</div>

CSS：

.colors div {
  display: inline-block;
  border: 4px solid transparent;
  width: 40px;
  height: 1em;
}

.colors div.selected {
  border: 4px solid black;
}

[data-color=red] {
  background-color: #d00;
}

[data-color=blue] {
  background-color: #00d;
}

[data-color=yellow] {
  background-color: #dd0;
}

[data-color=green] {
  background-color: #0d0;
}

JavaScript的：

(function() {
  var color = localStorage.getItem("color") || "red";
  console.log("color = " + color);
  $("[data-color='" + color + "']").addClass("selected");
  $(".colors").on("click", "[data-color]", function(e) {
    var $this = $(this);
    color = $this.attr("data-color");
    console.log("new color = " + color);
    localStorage.setItem("color", color);
    $(".selected").removeClass("selected");
    $this.addClass("selected");
  });
})();

用户在线时保持新颜色？

1 个答案: