javascript - 如何为颜色切换器添加 localStorage

标签 javascript jquery html css colors

下面的示例在我的网站上运行良好。我想使用 localStorage 保存颜色切换器操作。

注意:问题不在于脚本。我需要更改颜色主题,在重新加载页面后也会保持相同的颜色。

我不知道如何实现它。哪位帮忙解决下。

提前致谢。

Reference color theme link

$('#color-wrapper ul li, #color-wrapper p').click(function(){
  var color_scheme = $(this).attr('data-path');
  $('#color-switcher').attr('href',color_scheme);
});
#color-wrapper { width: 180px; margin: 0 auto; padding-top: 5px; }
#color-wrapper h2 { margin: 5px 0 5px; font-size: 15px; font-weight: bold; color: #000; }
#color-wrapper ul { margin: 0; padding: 0; }
#color-wrapper ul li { float: left; width: 26px; height: 26px; margin: 5px 10px 5px 0px;cursor: pointer;list-style: none; }
#color-wrapper ul li.thunder { background: #3a3138; }
#color-wrapper ul li.green { background: #2ecc71; }
#color-wrapper p { font-size: 14px; padding-top: 10px; color: #999; cursor: pointer; clear: both;}
#color-wrapper p:hover { color: #000; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://www.dropbox.com/s/f1qauyj5k7w3asn/default.css?dl=0" id="color-switcher">

<div id="demo-colors" class="demo-colors">
     <div id="color-wrapper">          
          <h2>COLORS:</h2>          
          <ul>
              <li class="thunder" data-path="https://www.dropbox.com/s/stf3xvmxqm738lj/thunder.css?dl=0"></li>
              <li class="green" data-path="https://www.dropbox.com/s/f1qauyj5k7w3asn/default.css?dl=0"></li>
          </ul>
          <div class="clear"></div>   
          <p data-path="https://www.dropbox.com/s/f1qauyj5k7w3asn/default.css?dl=0">Restore Default</p>

     </div>
</div>

最佳答案

首先将配色方案设置为本地存储项

$('#color-wrapper ul li, #color-wrapper p').click(function(){
   var color_scheme = $(this).attr('data-path');
   $('#color-switcher').attr('href',color_scheme);
   localStorage.setItem('color_scheme', color_scheme);
});

当页面加载时,检查一个元素是否以前保存过,如果是,则获取 localStorage 元素并更新 href

$(document).ready(function() {
    var saved_color_scheme = localStorage.getItem('color_scheme');
    if(saved_color_scheme) {
       $('#color-switcher').attr('href', saved_color_scheme);
    }
});

关于javascript - 如何为颜色切换器添加 localStorage,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57702451/

相关文章:

javascript - JQuery UI 对话框 - 需要添加一个最小化按钮

javascript - 使用 Ajax/jQuery 将外部页面的内容加载到另一个页面

javascript - jquery ajax - 调用我的 asp.net web api 给出错误的 url 和 404 未找到消息

javascript - 如何在 Javascript 函数中隐藏或散列值?

javascript - 为什么在使用分号时此 JavaScript 不被解释为代码块?

javascript - 是否可以将匿名函数附加到两个不同的元素/事件?

javascript - jQuery:捕捉链接内的点击

css - 通过 ID 将 CSS(通过 LESS)应用于模式框不起作用

javascript - Prototype.js 1.4.0 抛出 'Refused to set unsafe header "连接“”错误

javascript - 调整 Canvas 图像的大小