基於jQuery的訪客願望清單

Question

我創建了一個基於jQuery的客戶願望清單。

它具有以下功能：

1. 將項目添加到列表
2. 從列表中刪除項目
3. 相對時間更新的產品數量

我的問題是，一旦刷新頁面，所有項目都會消失。 我確實讀過，克服此問題的方法是使用localStorage。

由於我創建了一個動態數組，因此我不確定如何將數據存儲和檢索回面板中。

可以在這里找到到我正在工作的JSFiddle的鏈接： https ://jsfiddle.net/ypujmpnj/ jQuery代碼附在下面：

 var wish_list = new Array(); $(document).ready(function() { $(".wishlist").on("click", function() { $data = ""; $product_id = $(this).attr("product_id"); a $product_name = $(this).attr("product_name"); $prduct_price = $(this).attr("product_price"); //check if the element is in the array if ($.inArray($product_id, wish_list) == -1) { $product_str = "<tr class='wishlist-item' id='list_id_" + $product_id + "'><td class='w-pname'>" + $product_name + "</td><td class='w-price'>$ " + $prduct_price + "</td><td class='w-premove' wpid='" + $product_id + "'>x</td></tr>"; $("#wish_list_item").append($product_str); wish_list.push($product_str); show_message("Product " + $product_name + " added"); count_items_in_wishlist_update(); } }); //adding toggle functionality to the wishlist pannel $(".wish_list_heading").on("click", function() { if (!$(this).hasClass("up")) { $("#wish_list").css("height", "300px"); $(this).addClass("up"); $("#wish_list").css("overflow", "auto"); } else { $("#wish_list").css("height", "30px"); $(this).removeClass("up"); $("#wish_list").css("overflow", "hidden"); } }); $("#wish_list_item").on("click", ".w-premove", function() { $product_id = $(this).attr("wpid"); $("#list_id_" + $product_id).remove(); wish_list = $.grep(wish_list, function(n, i) { return n != $product_id; }); show_message("Product removed"); count_items_in_wishlist_update(); }); }); function show_message($msg) { $("#msg").html($msg); $top = Math.max(0, (($(window).height() - $("#msg").outerHeight()) / 2) + $(window).scrollTop()) + "px"; $left = Math.max(0, (($(window).width() - $("#msg").outerWidth()) / 2) + $(window).scrollLeft()) + "px"; $("#msg").css("left", $left); $("#msg").animate({ opacity: 0.6, top: $top }, 400, function() { $(this).css({ 'opacity': 1 }); }).show(); setTimeout(function() { $("#msg").animate({ opacity: 0.6, top: "0px" }, 400, function() { $(this).hide(); }); }, 1000); } //Validation against the amount of product being added function count_items_in_wishlist_update() { $("#listitem").html(wish_list.length); if (wish_list.length > 1) { $("#p_label").html("Products"); } else { $("#p_label").html("Product"); } } 

Answer 1

您可以定義一些幫助程序功能，例如一個用於在每次單擊項目時將更新的心願單存儲在本地存儲中的功能，還可以定義在刷新頁面時加載心願單的功能，類似地，用於從存儲中刪除該功能。

這是您更新的小提琴，其中顯示了頁面刷新后未刪除的項目。 https://jsfiddle.net/ypujmpnj/37/

function pushToStorage(arr) {
  if (typeof(Storage) !== "undefined") {
    localStorage.clear();
    localStorage.setItem("wish_list", JSON.stringify(arr));
    var stored_wishList = JSON.parse(localStorage.getItem("wish_list"));
  } else {
    console.log("your browser does not support Storage");
  }
}

function loadExisting() {
  var stored_wishList = JSON.parse(localStorage.getItem("wish_list"));
  if (stored_wishList != null) {
    wish_list = stored_wishList;

    stored_wishList.forEach(function(item, index, arr) {
      console.log(item);
      $("#wish_list_item").append(item);
    });
    count_items_in_wishlist_update();
  }
}

            $(document).ready(function() {
            loadExisting();
            $(".wishlist").on("click", function() {
                pushToStorage(wish_list);
            });
            })

Answer 2

簡短的答案：localStorage僅處理字符串，因此您需要使用JSON.stringify和JSON.parse來存儲和加載數組。

長答案：您需要首先替換聲明var wish_list = new Array(); 具有以下塊：

var wishlistkey = "wishlist";
// try and fetch an existing wishlist from the localStorage.
var wish_list = localStorage.getItem(wishlistkey)
if($.isEmptyObject(wish_list)) //nothing was saved previously
  wish_list = new Array()
else // this is the case where something was previously saved.
  wish_list = JSON.parse(wish_list)

您在這里正在尋找的東西可能以前已經保存在localStorage中。 如果找到它，則嘗試對其進行解析。 如果不是，則創建一個新數組。

下一步：每次修改wish_list時，都必須保存它。 所以，做了之后wish_list.push在添加單擊處理程序，並經過wish_list = $.grep( ...在remove單擊處理線，必須將其寫入使用以下行相同的localStorage的關鍵：

localStorage.setItem(wishlistkey, JSON.stringify(wish_list))

無論何時何地，只要您更新wish_list數組，都必須這樣做。