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
}

小提琴：https://fiddle.jshell.net/itsfranhere/1q93a6x1/9/

Answer 1

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

以下是我的方法：在HTML中，给每个人一个id。单击心脏时，将新状态保存在favorite:id下的localstorage中，其中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

现在是“虽然”部分：设置和取消设置

要设置一个位，你必须按位或位掩码：

00000 | 00100 = 00100

如果这个位已经设置好......没问题，之后就会设置它。

如果你想取消设置它有点棘手：你可以xor位掩码，但如果在现在设置之前没有设置该位。

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的基数的指数。如果你想设置一个心脏，添加这个值，如果你想删除它减去它（或者按位运算：|（或）用于添加和＆amp;（和）用于删除。

保存实际状态：

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

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

3 个答案: