我已经创建了一个基于 jQuery 的客人愿望 list 。
它具有以下特点:
- 将项目添加到列表
- 从列表中删除项目
- 添加产品数量的实时更新
我的问题是,一旦我刷新页面,所有项目都会消失。我确实读过克服这个问题的方法是使用 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");
}
}
最佳答案
您可以定义一些辅助函数,例如每次单击某个项目时将更新的心愿单存储在本地存储中的函数,以及在刷新页面时加载心愿单的函数,以及类似地从存储中删除的函数。
这是您更新后的 fiddle ,显示页面刷新后未删除的项目。 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);
});
})
关于javascript - 基于 jQuery 的访客愿望 list ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44108375/