加到我的收藏到本地儲存空間

Question

我學習的是Jquery。現在我創建一個添加到收藏夾鏈接的列表。我想使用jquery在本地存儲li值（例如html/Jquery/css）。一旦它添加到本地存儲，我想將「添加到收藏」文本更改爲「刪除」。

然後，一旦我點擊「刪除」鏈接，我想再次獲得「添加到收藏」。

請檢查this link，我粘貼了當前的代碼。

謝謝。

$('.lists a').click(function(e){ 
    var favs = $(this).parent().html(); 
    alert(favs); 
    $(this).text('Remove'); 
}); 

Answer 1

HTML

<ul id="FavList" class="lists"> 
    <li>Html5 <a href="#">Add to Fav</a></li> 
    <li>Jquery <a href="#">Add to Fav</a></li> 
    <li>Php <a href="#">Add to Fav</a></li> 
    <li>Photoshop <a href="#">Add to Fav</a></li> 
</ul> 

的JavaScript

if (!localStorage.getItem("LocalData")){ /*Check if, localStorage item `LocalData` is not set Yet*/ 
    localStorage.setItem("LocalData",$('#FavList').html()); /*Set `#FavList` HTML To LocalStorage item `LocalData`*/ 
}else{ 
    $('#FavList').html(localStorage.getItem("LocalData")); /*Set LocalStorage item `LocalData` to `#FavList` HTML*/ 
} 

$('.lists a').click(function(e){ 
    var text = $(this).text(); 
    $(this).text(text == "Add to Fav" ? "Remove" : "Add to Fav"); /*Toggle the text between `Add to Fav` and `Remove`*/ 
    localStorage.setItem("LocalData",$('#FavList').html()); /*Update localStorage item `LocalData` from `#FavList` HTML*/ 
}); 

注：這裏是關於localStorage，setItem，getItem

Answer 2

的細節有很多方法可以做到這一點。這是其中之一。

第一個函數檢查是否有任何值先前已保存在localstorage中，並相應地設置鏈接文本的文本。每次頁面刷新/重新打開時都會執行此操作。

第二個函數保存/刪除localstorage中的密鑰。

我已經使用<li>的文本作爲查找的關鍵字（即'html5'，'jQuery'...等等）。您可以選擇在名稱空間前添加一個名稱空間（例如localStorage.getItem('myNamespace' + favs)），並使用該名稱空間檢索該值，以便在需要時將其與localstorage中的其他值分開。

var addFav = "Add to Fav"; 
var remFav = "Remove"; 

// update anchor tag text based on previous stored selections 
$('.lists a').each(function(e){ 

    var favs = $(this).parent().contents().filter(function(){ 
    return this.nodeType == 3; 
    })[0].nodeValue 

    if (localStorage.getItem(favs) === "saved") { 
     $(this).text(remFav); 
    } else { 
     $(this).text(addFav); 
    } 
}); 

// this function assumes that 1) <li> has at least some text outisde the <a>, 
// and 2) the text is unique for every <li> - since it is used as a key in the lookup 
$('.lists a').click(function(e){ 

    // Grab the text of the parent, whilst excluding the text in the anchor tag (https://stackoverflow.com/a/14755309/1544886). 
    var favs = $(this).parent().contents().filter(function(){ 
    return this.nodeType == 3; 
    })[0].nodeValue 

    if (localStorage.getItem(favs) === null) { 
    localStorage.setItem(favs, "saved"); 
     $(this).text(remFav); 
    } else { 
    localStorage.removeItem(favs); 
     $(this).text(addFav); 
    } 
}); 

<ul class="lists"> 
    <li>Html5 <a href="#"></a></li> 
    <li>Jquery <a href="#"></a></li> 
    <li>Php <a href="#"></a></li> 
    <li>Photoshop <a href="#"></a></li> 
</ul> 

外部演示：https://jsfiddle.net/n4byghd3/1/

要測試的演示中選擇一項或兩下，然後關閉並重新打開網頁（或只是再次單擊運行）。

Answer 3

jsfiddle

<ul class="list"> 
     <li id="pancakes">Pancakes</li> 
     <li id="donuts">Donuts</li> 
     <li id="cupcakes">Cupcakes</li> 
     <li id="icecream">Icecream</li> 
     <li id="cookies">Cookies</li> 
     <li id="chocolate">Chocolate</li> 
    </ul> 

---

.list li { 
    cursor: pointer; 
} 
.list li:hover:after, 
.list li.fav:after { 
    content: ' \2605'; 
    color: rgb(255, 203, 0); 
} 
.list li.fav:hover:after { 
    content: ' \2606'; 
} 

---

// get favorites from local storage or empty array 
var favorites = JSON.parse(localStorage.getItem('favorites')) || []; 
// add class 'fav' to each favorite 
favorites.forEach(function(favorite) { 
    document.getElementById(favorite).className = 'fav'; 
}); 
// register click event listener 
document.querySelector('.list').addEventListener('click', function(e) { 
    var id = e.target.id, 
     item = e.target, 
     index = favorites.indexOf(id); 
    // return if target doesn't have an id (shouldn't happen) 
    if (!id) return; 
    // item is not favorite 
    if (index == -1) { 
    favorites.push(id); 
    item.className = 'fav'; 
    // item is already favorite 
    } else { 
    favorites.splice(index, 1); 
    item.className = ''; 
    } 
    // store array in local storage 
    localStorage.setItem('favorites', JSON.stringify(favorites)); 
}); 

// local storage stores strings so we use JSON to stringify for storage and parse to get out of storage 

Answer 4

嗨，你可以使用下面的語法，所以只需設置 '加入收藏' 並單擊刪除按鈕，使用本地存儲將「添加到收藏」值添加回來。

1. 您可以使用此語法

   localStorage.setItem('AddToFav', "Add To Fav"); 
   

   設置在本地存儲值

2. 您可以使用此語法

   var grdTotal= localStorage.getItem('AddToFav'); 
   

   獲得本地存儲值

3. 您可以在本地存儲中刪除值使用此語法

   localStorage.removeItem('AddToFav'); 
   

謝謝。

Answer 5

添加簡單的兩步添加並檢查localStorage。 https://jsfiddle.net/1h433ykk/1/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
<ul class="lists"> 
    <li>Html5<a href="#">Favorite</a></li> 
    <li>Jquery<a href="#">Favorite</a></li> 
    <li>Php<a href="#">Favorite</a></li> 
    <li>Photoshop<a href="#">Favorite</a></li> 
</ul> 

：

• 檢查是否已經添加到localStorage的，並設置根據串
• 創建單擊事件收藏/從localStorage的

您還可以檢查代碼中刪除到/

var addToFav = "Favorite"; 
var remove = "Remove"; 

/* Check for each a tag if already added to localStorage 
* .contents[0].nodevalue returns value of tag a 
*/ 
$('.lists a').each(function(e) { 
    if (localStorage.getItem($(this).parent().contents()[0].nodeValue)) { 
    $(this).html(remove); 
    } else { 
    $(this).html(addToFav); 
    } 
}); 
//create click event and check if nodeValue is already added or not and set text accordingly 
$('.lists a').click(function(e) { 
    var nodeVal = $(this).parent().contents()[0].nodeValue; 
    if (localStorage.getItem(nodeVal)) { 
    localStorage.removeItem(nodeVal); 
    $(this).html(addToFav); 
    } else { 
    localStorage.setItem(nodeVal, "true"); 
    $(this).html(remove); 
    } 
}); 

body { 
    font-family: arial; 
    font-size: 13px; 
} 

ul { 
    max-width: 200px; 
} 

ul, 
ul li { 
    padding: 0; 
    margin: 0; 
    list-style: none; 
} 

ul li { 
    padding: 10px; 
    border: 1px solid #CCC; 
    margin: -1px 0 0 0; 
} 

ul li a { 
    color: #cb0070; 
    text-decoration: none; 
    float: right; 
}