如何在本地存儲頁面刷新後記住當前切換狀態？

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

如何在本地存儲頁面刷新後記住當前切換狀態？

回答

相關問題