Question

我创建了一个基于jQuery的访客愿望清单。

它具有以下功能：

将项目添加到列表
从列表中删除项目
及时更新已添加产品的数量

我的问题是，一旦刷新页面，所有项目都会消失。我确实读到了解决这个问题的方法是使用localStorage。

由于我创建了一个动态数组，我不确定如何将数据存储和检索回面板。

可以在此处找到我工作的JSFiddle的链接：https://jsfiddle.net/ypujmpnj/ jQuery代码附在下面：

＆＃13;

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");
  }
}

＆＃13;

Answer 1

您可以定义一些辅助函数，例如一个用于在每次单击项目时将更新的wishlist存储在本地存储中，还可以在刷新页面时加载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);
            });
            })

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( ...行之后，必须使用以下行将其写入相同的localStorage键：

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

无论何时何地更新wish_list数组，都必须这样做。

基于jQuery的Guest Wishlist

2 个答案: