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

Question

我有 3 个选项卡：'Monday'、'Tuesday' 和 'Favorites'。每个选项卡都包含开头带有空心的框（'.favorite i'）。我想在刷新后保存当前切换class。

切换：

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

如您所见，您需要单独存储每颗心。

这是我的做法：在 HTML 中，给每颗心一个 id。单击一颗心时，将新状态保存在 favorite:id 下的本地存储中，其中 id 替换为心的 id。

当页面加载时，抓住页面上的每颗心，并使用其 id.

查找其收藏状态

示例：https://fiddle.jshell.net/1q93a6x1/10/

Answer 2

这是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

Answer 3

如果只想使用一个变量，可以使用位掩码。

理论如果要保存5个状态，则二进制值有5位。在十进制中，它是一个介于 0 和 31 之间的变量。

首先是简单的部分：如何读出状态？ 假设实际状态是 31 (11111)，我们想知道第三位数字的值。我们应该怎么做？只是按位和带有位掩码的状态，其中所有数字都为零，除了我们想知道的数字：

11111 & 00100 = 00100

如果结果大于零，则设置此数字。

要创建位掩码，只需将 1 移动您要查看的位数即可：1 << 2 = 00100

现在是 "though" 部分：设置和取消设置

要设置位，您必须按位或位掩码：

00000 | 00100 = 00100

如果该位已经设置...没问题，之后会设置。

如果您想稍微取消设置，这有点棘手：您可以对位掩码进行异或运算，但如果该位在现在设置之前未设置。

00100 ^ 00100 = 00000, BUT
00000 ^ 00100 = 00100 (now it's set. It's a trigger, not an unset)

您可以确定的方法是：创建反向位掩码并使用按位和：

00100 & (00100 ^ (11111)) = 00100 & 11011 = 00000, AND
00000 & (00100 ^ (11111)) = 00000 & 11011 = 00000

现在开始编码

为此，你在 dom 中取心的位置，并将其用作 2 的底数的指数。如果你想设置心，请添加此值，如果你想删除它减去它（或按位运算：|（或）用于添加和 &（和）用于删除）。

保存实际状态：

var $heartLinks = $('.favorite');
var $heartLink = $(this);
var position = $heartLinks.index($heartLink); // this is the position inside the bitmask

var actualBitmask = parseInt(localStorage.displayIcon || '0', 10);
var bit = (1 << position);
var invertedBit = bit ^ ((1 << $heartLinks.length) - 1);
if(!$heartLink.find('i').hasClass('fa-heart-o'))
    actualBitmask |= bit;
else
    actualBitmask &= invertedBit;
localStorage.setItem('displayIcon', actualBitmask);

并在站点准备就绪时调用它：

var showIconToggle = localStorage.displayIcon || 0;
$heartLinks.map(function(idx) {
  if((showIconToggle & Math.pow(2,idx)) > 0)
    $(this).find('i').toggleClass('fa-heart-o fa-heart');
});

工作fiddle

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

How to remember current toggle state in this example after page refresh with local storage?

javascript

jquery

storage

save

toggle