Question

我在博客上添加了通过单击按钮（到浅色，黑暗和默认主题）来更改某些div的样式的选项。为了变得更好，我需要当访问者选择一个时，该样式被保存在localStorage中，但我不知道该怎么做。我通过查看互联网上的例子尝试了很多，但没有一个适合我的情况而且我迷路了。这是我的代码：

具有onclick功能的底部：

<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;
}

预览：https://i.stack.imgur.com/ncneS.jpg

Answer 1

样式将保存在localStorage
中

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

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

曲奇
会话

Answer 2

好的，你想在浏览器中做到这一点。你想保存多长时间的样式信息？如果用户重新加载页面，我认为您希望保留所选的样式。如果用户正在关闭浏览器，请再次打开它，访问您的网站，您想要的行为是什么？

Answer 3

更好的方法是在body上切换数据属性并使用它来使用CSS设置内容样式：

https://jsfiddle.net/bt3qh8L1/2/（不得不添加小提琴，SO片段不允许使用localStorage）。

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

以下是有关本地存储及其工作方式的更多信息：https://developer.mozilla.org/en-US/docs/Web/API/Storage/LocalStorage

干杯。

如何＆＃34;保存＆＃34;我在LocalStorage中的JS样式？

3 个答案: