代码之家 › 专栏 › 技术社区 › Kenya JJ

如何在LocalStorage中“保存”我的JS样式?

local-storage function javascript

Kenya JJ · 技术社区 · 6 年前

我在我的博客上设置了一个选项,可以通过单击按钮来更改某些div的样式( 以光明、黑暗和污浊为主题 )。为了做得更好,我需要在访问者选择一个时,将该样式保存在本地存储中,但我不知道如何做到这一点。我在网上看了很多例子,但没有一个符合我的情况,我迷路了。这是我的代码:

具有onclick函数的botton :

<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

3 回复 | 直到 6 年前

Mladen IliÄ George Cummins 6 年前

更好的方法是切换正文上的数据属性,并使用它来使用CSS设置内容样式:

https://jsfiddle.net/bt3qh8L1/2/ (必须添加fiddle,因此代码段不允许使用 localStorage )。

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

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

干杯

user2285973 6 年前

样式保存在localStorage中

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

或者您想在客户端浏览器中本地保存信息?那么我们有不同的选择。我们可以使用:

曲奇
一场

user2285973 6 年前

好的,您希望在浏览器中本地执行此操作。要保存样式信息多长时间?如果用户重新加载页面,我认为您希望保留选定的样式。如果用户正在关闭浏览器并再次打开它,访问您的网站,您想要什么行为?