javascript - 使用本地存储刷新页面后，如何记住此示例中的当前切换状态？

Question

我有 3 个选项卡:“星期一”、“星期二”和“收藏夹”。每个选项卡都包含开头带有空心的框(“.favorite i”)。我想在刷新后保存当前的切换类。

切换:

heartLink.find('i').toggleClass('fa-heart-o fa-heart'); // .selected or not

我开始于:

if (heartLink.find('i').hasClass('fa-heart-o')) {
  localStorage.setItem('displayIcon', 0);
 } else {
  localStorage.setItem('displayIcon', 1);
 }

然后我知道我需要类似的东西，但不知道该怎么做..

明确一下:我想保存每个特定心脏的当前状态。我不会用一个图标来影响所有框。

var showIconToggle = localStorage.getItem('displayIcon');
if (showIconToggle == 'true') {
    // some code
}

HTML:

   <section id="speakers-programme">
     <div class="container">
       <div class="tabs_main">

          <div class="col-md-5"><a data-target="#mon" class="btn active" data-toggle="tab">Monday</a></div>
          <div class="col-md-5"><a data-target="#tue" class="btn active" data-toggle="tab">Tuesday</a></div>
          <div class="col-md-2"><a data-target="#fav" class="btn active" data-toggle="tab"><i class="fa fa-heart" aria-hidden="true"></i></a></div>

       </div>

       <div class="tab-content">

         <div class="tab-pane active" id="mon">
           <br>
           <div class="spaces">
             <div class="box-container">
               <div class="box not-selected" id="box1">
               <a href="#" class="favorite"><i class="fa fa-heart-o" aria-hidden="true"></i></a>
             </div>
            </div>
            <div class="box-container">
             <div class="box not-selected" id="box2">
               <a href="#" class="favorite"><i class="fa fa-heart-o" aria-hidden="true"></i></a>
             </div>
            </div>
         </div>

        </div>

        <div class="tab-pane active" id="tue">
           <br>
           <div class="spaces">
           </div>
        </div>

        <div class="tab-pane active" id="fav">
           <br>
           <div class="spaces">
           </div>
        </div>


        </div>
     </div>
  </section>

JS:

$('div.tab-pane').on('click', '.favorite', function(e) {
      e.preventDefault();

        var heartLink = $(this);

      //TOGGLE FONT AWESOME ON CLICK
      heartLink.find('i').toggleClass('fa-heart-o fa-heart'); // .selected or not, you need those 2 classes to toggle.

      if (heartLink.find('i').hasClass('fa-heart-o')) {
        localStorage.setItem('displayIcon', 0);
      } else {
        localStorage.setItem('displayIcon', 1);
      }


});

var showIconToggle = localStorage.getItem('displayIcon');
   if (showIconToggle == 'true') {
     // some code here
}

fiddle :https://fiddle.jshell.net/itsfranhere/1q93a6x1/9/

Answer 1

这是一个后续问题that one .

要保存未克隆的元素状态(无论是否喜欢)，请添加以下内容:

在 click 处理程序的末尾，保存单击的 i 的类。

// save this current toggle state
localStorage.setItem(box.attr("id"), $(this).find("i").attr("class"));
console.log($(this).find("i").attr("class"));

在页面加载时，在从 localStorage 加载收藏夹之前，应用这些保存的类:

// Load heart's element states
$(".box").each(function(){
  console.log( $(this).attr("id") );
  console.log( localStorage.getItem($(this).attr("id")) );

  if(localStorage.getItem($(this).attr("id")) != null){
    $(this).find("i").removeClass().addClass( localStorage.getItem($(this).attr("id")) );
  }
});

CodePen v5