javascript - 基于 jQuery 的访客愿望 list

Question

我已经创建了一个基于 jQuery 的客人愿望 list 。

它具有以下特点:

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

您可以定义一些辅助函数，例如每次单击某个项目时将更新的心愿单存储在本地存储中的函数，以及在刷新页面时加载心愿单的函数，以及类似地从存储中删除的函数。

这是您更新后的 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);
            });
            })