如何保存”我的JS样式在Localstorage中

Question

我在博客上放置了通过单击按钮(到Light，Dark和Defaul主题(来更改某些DIV的选项。为了变得更好，当访客选择一个时，我需要这种样式可以保存在LocalStorage中，但我不知道该怎么做。我通过查看互联网上的示例，但我尝试了很多，但是我的案子都不适合我，我迷路了。这是我的代码：

带有OnClick函数的Bottons ：

<button onClick="lightTheme()" class="button light">Light</button>
<button onClick="grayTheme()" class="button default">Default</button>
<button onClick="darkTheme()" class="button dark">Dark</button>

我的完整JavaScript：

  function lightTheme(){
  var ele = document.getElementsByClassName('picArea');
  for (var i = 0; i < ele.length; i++ ) {
  ele[i].style.backgroundColor = "#EEE";
  ele[i].style.borderColor = "#000";
  }
  var ele = document.getElementsByClassName('picTitle');
  for (var i = 0; i < ele.length; i++ ) {
  ele[i].style.color = "#111";
  }
  var ele = document.getElementsByClassName('picNumber');
  for (var i = 0; i < ele.length; i++ ) {
  ele[i].style.backgroundColor = "#AAA";
  ele[i].style.color = "#111";
  }
}
function darkTheme(){
  var ele = document.getElementsByClassName('picArea');
  for (var i = 0; i < ele.length; i++ ) {
  ele[i].style.backgroundColor = "#222";
  ele[i].style.borderColor = "#000";
  }
  var ele = document.getElementsByClassName('picTitle');
  for (var i = 0; i < ele.length; i++ ) {
  ele[i].style.color = "#fff";
  }
  var ele = document.getElementsByClassName('picNumber');
  for (var i = 0; i < ele.length; i++ ) {
  ele[i].style.backgroundColor = "#";
  ele[i].style.color = "#EEE";
  }
}
function grayTheme(){
  var ele = document.getElementsByClassName('picArea');
  for (var i = 0; i < ele.length; i++ ) {
  ele[i].style.backgroundColor = "#777";
  ele[i].style.borderColor = "#000";
  }
  var ele = document.getElementsByClassName('picTitle');
  for (var i = 0; i < ele.length; i++ ) {
  ele[i].style.color = "#fff";
  }
  var ele = document.getElementsByClassName('picNumber');
  for (var i = 0; i < ele.length; i++ ) {
  ele[i].style.backgroundColor = "#555";
  }
}

...如果有帮助：

我在html上的div：

<div class="picArea"><p class="picTitle">Picture X<span class="picNumber">1</span></p></div>
<div class="picArea"><p class="picTitle">Picture X<span class="picNumber">2</span></p></div>
<div class="picArea"><p class="picTitle">Picture X<span class="picNumber">3</span></p></div>

CSS(仅适用于演示(：

.picArea {
    border: 1px solid #000;
    background: #777;
    padding: 5px;
    margin: 5px 0;
}
.picTitle {
    font-size: 150%;
    margin: 0;
    color: #fff;
}
.picNumber {
    padding: 0 7px;
    background: #555;
    border-radius: 50%;
    margin-left: 10px;
    color: #ccc;
    font-size: 80%;
}
.button {
    width: 75px;
    height: 50px;
    border-radius: 50%;
    border: none;
}
.button.light {
    background: #ccc;
    color: #000;
}
.button.dark {
    background: #000;
    color: #fff;
}
.button.default {
    background: #777;
    color: #fff;
}

A预览：https：//i.stack.imgur.com/ncnes.jpg

Answer 1

更好的方法是在身体上切换数据属性，并使用它与CSS进行样式：

https://jsfiddle.net/bt3qh8l1/2/(必须添加小提琴，因此摘要不允许使用localStorage(。

您可以使用localStorage.setItem('key', 'value');和localStorage.getItem('key');从本地存储存储和加载数据。

以下是有关本地存储及其工作方式的更多信息：https：//developer.mozilla.org/en-us/docs/web/api/storage/storage/localstorage

欢呼。

Answer 2

样式被保存在localstorage

您必须定义要使用哪种存储。因此，如果您有注册用户，则可以将该样式信息保存在服务器数据库中。

，或者您想将本地信息保存在客户端浏览器中？然后我们有不同的选择。我们可以使用：

• cookie
• 会话

Answer 3

好的，您想在浏览器中进行本地化。您想保存样式信息多长时间？如果用户重新加载页面，我认为您想保留所选样式。如果用户再次关闭浏览器，然后访问您的网站，您想要什么行为？