基於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

簡短的回答：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(...行之後，您必須使用以下行寫入同localStorage的關鍵：

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

這將有工作要做無論何時何地更新wish_list數組。

Answer 2

你可以這樣定義一個幾個輔助函數，用於存儲更新的心願在每次點擊一個項目時都在本地存儲中，並且還有一個功能，用於在刷新頁面時加載wish_list，並且類似地從存儲中移除。

這是您更新的小提琴，顯示頁面刷新後未刪除的項目。 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); 
      }); 
      })