时间戳

首页 > 解决方案 > 如何为颜色切换器添加 localStorage

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

问题描述

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

注意：脚本没有问题。我需要更改颜色主题在重新加载页面后也将保持相同的颜色。

我不知道如何实现它。谁帮忙解决。

提前致谢。

参考颜色主题链接

$('#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>

标签： javascriptjqueryhtmlcsscolors

解决方案

首先将配色方案设置为 localStorage 项

$('#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);
    }
});

推荐阅读