javascript - 用户在线时保持新颜色？

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");
  });
})();