如何在本地存储页面刷新后记住当前切换状态？

我有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/

来源

2017-09-11 catarina melim

您需要将其保存在localStorage的还是你内心的3个不同的密钥可以使用位掩码将其保存在一个变量中。这取决于你的风格和知识。 –

感谢您的回复@JoshuaK您能否告诉我一种做法？正如我所提到的，我似乎无法达到我想要的结果。如果你可以请看看小提琴。 –

添加了一个将其存储在一个变量中的解决方案。通过这种方式，你不需要每个心脏都有一个ID，localStorage保持干净并且没有充满每个心脏的状态变量。（只是给定的答案和加入答案） –

这是如下因素向上that one的问题。

要保存，不会复制元件状态（收藏或没有），补充一点：

在click处理程序结束，保存类的点击i。如果你想只使用一个变量，你可以使用一个位掩码

// 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

来源

2017-09-12 00:23:11

非常棒，这是肯定的最佳答案！现在最后一个问题分开..一切运作良好，但如果我用localstorage刷新页面，我会遇到一些问题。我会解释..如果我第一次在网站上，我去'星期一'标签并克隆几个盒子，他们都会按照假设的去#fav，如果我点击其中任何一个'星期一'中的克隆被删除，都很好。当我刷新浏览器并执行相同操作时，它不会删除克隆并将新克隆添加到#fav选项卡，并且如果我在#fav选项卡中，我有2个框，在单击一个填充的心时，该阵列被删除 –

我期待着您对这个问题的意见，这真的是我的项目上缺少的东西，然后我就能完成它。尽快回复。再一次感谢你！ –

我已经创建了一个新问题来尝试解决这个问题..在这里：https：// stackoverflow。com/questions/46167293/why-is-persisting-data-not-working-as-it-it- –

正如你所看到的，你需要单独存储每个心脏。

下面是我该怎么做：在HTML中，给每个心脏一个id。点击心脏后，将新状态保存在本地存储的favorite:id下，其中id被心脏的id取代。

页面加载时，抓住页面上的每个心脏，并使用其id查找其最喜欢的状态。

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

来源

2017-09-12 00:18:31 Sidney

太棒了！非常感谢你的帮助:) –

：

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

在页面加载，从localStorage的加载收藏前，应用这些保存的类。

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

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

11111 & 00100 = 00100

如果结果大于零，这个数字设置。

要创建位掩码只是想看看在数字移动量1：1 << 2 = 00100

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

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

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

现在，让我们的代码

对于这一点，你需要的心脏中的位置并用它作为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

来源

2017-09-12 00:36:38

如何在本地存储页面刷新后记住当前切换状态？

回答

相关问题