javascript - 使用本地存储更改我的网页背景

Question

很很长一段时间以来，我一直想知道如何更改我编写的网页上的背景图片，但是当用户刷新我的网站时，我希望他们的更改仍然存在。就像他们通过单击更改背景一样，当他们刷新页面时，我希望该背景仍然存在。我必须使用本地存储或 cookie 吗？在那种情况下，有人可以教我怎么做吗？

感谢您花时间阅读本文，希望我能得到一个好的答案。

我的代码示例:http://koda.nu/arkivet/33733671 (密码:“cwm”，全屏打开)。我确实尝试过学习 localStorage。

Answer 1

var body = document.body;

// Apply if present in storage
if (localStorage.bgcolor) body.style.backgroundColor = localStorage.bgcolor;

// Set on button click
document.querySelectorAll("[data-bgcolor]").forEach(el =>
  el.addEventListener("click", function() {
body.style.backgroundColor = localStorage.bgcolor = this.getAttribute("data-bgcolor");
  })
);

<button data-bgcolor="red">red</button>
<button data-bgcolor="#00f">blue</button>
<button data-bgcolor="white">white</button>