Javascript 如何在页面刷新时记住css类？

实际上，我想在单击标记时为锚标记添加类，但它在加载页面时隐藏。在我的情况下，我想刷新我的页面加载后，它也应该添加类，无论是点击。如何解决这个问题

HTML代码：

<div class="flDropDiv category_fl">
    <div class="flItems"><a class="category_filter" href="http://192.168.1.156/eles/bed-linen/full-bed-sheets"> Full bed sheets   </a> </div>
    <div class="flItems"><a class="category_filter" href="http://192.168.1.156/eles/bed-linen/fitted-bed-sheet"> Fitted bed Sheet  </a> </div>
    <div class="flItems"><a class="category_filter" href="http://192.168.1.156/eles/bed-linen/flat-bed-sheet"> Flat bed sheet  </a> </div>
    <div class="flItems"><a class="category_filter" href="http://192.168.1.156/eles/bed-linen/twin-bed-sheet"> Twin bed sheet  </a> </div>
    <div class="flItems"><a class="category_filter" href="http://192.168.1.156/eles/bed-linen/twinxl-bed-sheets"> Twinxl bed sheets   </a> </div>
    <div class="flItems"><a class="category_filter" href="http://192.168.1.156/eles/bed-linen/queen-bed-sheet"> Queen bed sheet  </a> </div>
    <div class="flItems"><a class="category_filter" href="http://192.168.1.156/eles/bed-linen/king-bed-sheets"> King bed sheets  </a> </div>
    <div class="flItems"><a class="category_filter" href="http://192.168.1.156/eles/bed-linen/cal-king-bed-sheets"> Cal king bed sheets  </a> </div>
    <div class="flItems"><a class="category_filter" href="http://192.168.1.156/eles/bed-linen/duvet-covers"> Duvet covers  </a> </div>
    <div class="flItems"><a class="category_filter" href="http://192.168.1.156/eles/bed-linen/bed-skirts"> Bed skirts  </a> </div>
    <div class="flItems"><a class="category_filter" href="http://192.168.1.156/eles/bed-linen/standard-pillow-cases"> Standard Pillow cases  </a> </div>
    <div class="flItems"><a class="category_filter" href="http://192.168.1.156/eles/bed-linen/king-pillow-cases"> King Pillow cases  </a> </div>
    <div class="flItems"><a class="category_filter" href="http://192.168.1.156/eles/bed-linen/pillow-shells"> Pillow shells  </a> </div>
</div>

---

有很多方法可以做到这一点。下面的代码对您更具指导意义

添加id-s的示例html

<div class="flDropDiv category_fl">
    <div class="flItems"><a class="category_filter" id="category_filter_1" href="#1"> Full bed sheets   </a> </div>
    <div class="flItems"><a class="category_filter" id="category_filter_2" href="#2"> Fitted bed Sheet  </a> </div>
    <div class="flItems"><a class="category_filter" id="category_filter_3" href="#3"> Fitted bed Sheet  </a> </div>
    <div class="flItems"><a class="category_filter" id="category_filter_4" href="#4"> Fitted bed Sheet  </a> </div>
</div>

---

---

JavaScript

//On page load - add selected class to clicked elements
$( document ).ready(function() {
  let allCookies = getCookies();
  for(let cookie in allCookies){
    if(allCookies[cookie] === "clicked"){
       $("#"+cookie.trim()).addClass("selected");
    }
  }
});


//On item click - add selected class and remember it in cookie for later usage
$(".category_filter").click(function(e) {
    $(this).addClass('selected');
    setCookie( this.id, "clicked", 1);
});

//Gets all the cookies 
function getCookies(){
  var pairs = document.cookie.split(";");
  var cookies = {};
  for (var i=0; i<pairs.length; i++){
    var pair = pairs[i].split("=");
    cookies[pair[0]] = unescape(pair[1]);
  }
  return cookies;
}

//add new cookie
function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

//页面加载-将所选类添加到单击的元素
$（文档）.ready（函数（）{
让allCookies=getCookies（）；
for（让cookie加入所有cookie）{
如果（所有cookies[cookie]=“单击”）{
$（“#”+cookie.trim（））.addClass（“选定”）；
}
}
});
//在项目上单击-添加所选类并在cookie中记住它以供以后使用
$（“.category_filter”）。单击（函数（e）{
$（this.addClass（'selected'）；
setCookie（this.id，“clicked”，1）；
});
//得到所有的饼干
函数getCookies（）{
var pairs=document.cookie.split（“；”）；
var cookies={}；
对于（var i=0；i有很多方法可以做到这一点。下面的代码更适合您

添加id-s的示例html

<div class="flDropDiv category_fl">
    <div class="flItems"><a class="category_filter" id="category_filter_1" href="#1"> Full bed sheets   </a> </div>
    <div class="flItems"><a class="category_filter" id="category_filter_2" href="#2"> Fitted bed Sheet  </a> </div>
    <div class="flItems"><a class="category_filter" id="category_filter_3" href="#3"> Fitted bed Sheet  </a> </div>
    <div class="flItems"><a class="category_filter" id="category_filter_4" href="#4"> Fitted bed Sheet  </a> </div>
</div>





JavaScript

//On page load - add selected class to clicked elements
$( document ).ready(function() {
  let allCookies = getCookies();
  for(let cookie in allCookies){
    if(allCookies[cookie] === "clicked"){
       $("#"+cookie.trim()).addClass("selected");
    }
  }
});


//On item click - add selected class and remember it in cookie for later usage
$(".category_filter").click(function(e) {
    $(this).addClass('selected');
    setCookie( this.id, "clicked", 1);
});

//Gets all the cookies 
function getCookies(){
  var pairs = document.cookie.split(";");
  var cookies = {};
  for (var i=0; i<pairs.length; i++){
    var pair = pairs[i].split("=");
    cookies[pair[0]] = unescape(pair[1]);
  }
  return cookies;
}

//add new cookie
function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

//页面加载-将所选类添加到单击的元素
$（文档）.ready（函数（）{
让allCookies=getCookies（）；
for（让cookie加入所有cookie）{
如果（所有cookies[cookie]=“单击”）{
$（“#”+cookie.trim（））.addClass（“选定”）；
}
}
});
//在项目上单击-添加所选类并在cookie中记住它以供以后使用
$（“.category_filter”）。单击（函数（e）{
$（this.addClass（'selected'）；
setCookie（this.id，“clicked”，1）；
});
//得到所有的饼干
函数getCookies（）{
var pairs=document.cookie.split（“；”）；
var cookies={}；
对于（var i=0；iOn refresh您的更改将消失。您可以做2件事-1.将单击的项目保存到Localstorage或cookie中，如果保存了任何标记，则在加载时将选定的类添加到该标记中。2.或者您可以将选定的标记保存到后端，并在加载时通过ajax添加类（如果选择了任何人）。您可以使用Localstorage或cookie f或者保存数据，如果您不这样做，则在页面重新加载时它将不起作用。如何存储在本地存储中？请参阅“刷新”，您的更改将消失。您可以做两件事-1.将单击的项保存到本地存储或cookie中，如果保存了任何标记，则在加载时将选定的类添加到该类中。2.或者您可以将选定的标记保存到后端并在加载时获取thr通过ajax并添加类（如果选择了任何人）。您可以使用localstorage或Cookie来持久化数据，如果您不这样做，则在页面重新加载时将无法工作。如何在本地存储中存储？请参阅