将本地存储或 cookie 添加到 JQuery 购物车

Question

我正在使用 JQuery 构建类似购物车的功能。到目前为止，我可以毫无问题地在购物车中添加和删除商品。

但是，如果用户刷新页面或决定离开，我希望列表中的项目保持不变。

这是没有任何本地存储的正常运行的购物车的 sn-p。

$(document).ready(function() {
  $(".btn-primary").click(function(e) {
    $(this).toggleClass("btn-warning");
    toggleText($(this));

    if (!$(`li[data-attribute="${e.target.id}"]`).length) {
      addItem(e.target.id);
    } else {
      $(`li[data-attribute="${e.target.id}"]`).remove();
    }
    setBadge();
    $(".btn-danger").click(function() {
      removeItem($(this).parent("li"));
    });
  });
});

function removeItem(item) {
  $(`#${item.data("attribute")}`).removeClass("btn-warning");
  toggleText($(`#${item.data("attribute")}`));
  item.remove();
  setBadge();
}

function addItem(item) {
  $("ul").append(
    `<li class='well' data-attribute='${item}'>
       ${$(`.${item}-container p`).text()} 
       <button class='btn btn-danger'>-</button>
     </li>`
   );
}

function setBadge() {
  $(".badge").remove();
  $("h3").after("<span class='badge'>" + $("li").length + "</span>");
}

function toggleText(item) {
  if (item.hasClass("btn-warning")) {
    item.text("-");
  } else {
    item.text("+");
  }
}

h3 {
  display: inline;
}

.list-inline {
  padding: 3rem 0;
}

li.well {
  margin: 0 2rem;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="container">
  <div class="row">
    <div class="col-xs-3">
      <div class="well item-1-container">
        <p class="lead">
          Item 1
        </p>
        <button class="btn btn-primary" id="item-1">+</button>
      </div>
    </div>
    <div class="col-xs-3">
      <div class="well item-2-container">
        <p class="lead">
          Item 2
        </p>
        <button class="btn btn-primary" id="item-2">+</button>
      </div>
    </div>
    <div class="col-xs-3">
      <div class="well item-3-container">
        <p class="lead">
          Item 3
        </p>
        <button class="btn btn-primary" id="item-3">+</button>
      </div>
    </div>
    <div class="col-xs-3">
      <div class="well item-4-container">
        <p class="lead">
          Item 4
        </p>
        <button class="btn btn-primary" id="item-4">+</button>
      </div>
    </div>
  </div>
</div>

<hr />

<div class="container">
  <h3>The List </h3>
  <ul class="list-unstyled list-inline"></ul>
</div>

这是我尝试将本地存储合并到购物车中以便存储物品的CodePen Demo。正如您在演示中看到的那样，它不起作用。

有人可以帮我弄清楚我做错了什么吗？

Answer 1

这里有一个解决方案https://codepen.io/Shiladitya/pen/VzpQzM?editors=1010

$(document).ready(function() { 
  
  if(localStorage.getItem("cart") != null){
    var items = JSON.parse(localStorage.getItem("cart")).items;
    for(var i=0; i<items.length; i++){
      addItem(items[i]);
      $('#' + items[i]).toggleClass("btn-warning");
      toggleText(items[i]);
    }
    setBadge();
  }
  
  $(".btn-primary").click(function(e) {
    $(this).toggleClass("btn-warning");
    toggleText($(this).attr('id'));

    if (!$(`li[data-attribute="${e.target.id}"]`).length) {
      addItem(e.target.id);
    } else {
      $(`li[data-attribute="${e.target.id}"]`).remove();
    }
    setBadge();
    setLocalStorage(e.target.id, 0);
    $(".btn-danger").on('click', function() {
      removeItem($(this).parent("li"));
      setLocalStorage($(this).data('id'), 1);
    });
  });
  
  $(".btn-danger").on('click', function() {
    removeItem($(this).parent("li"));
    setLocalStorage($(this).data('id'), 1);
  });
});

function removeItem(item) {
  console.log(item);
  var id = item[0].attributes[1].value;
  $(`#${id}`).removeClass("btn-warning");
  toggleText(id);
  item.remove();
  setBadge();
}

function addItem(item) {
  $("ul").append(
        `<li class='well' data-attribute='${item}'>
${$(`.${item}-container p`).text()} 
<button class='btn btn-danger' data-id='${item}'>-</button>
</li>`
      );  
}

function setBadge() {
  $(".badge").remove();
  $("h3").after("<span class='badge'>" + $("li").length + "</span>");
}

function toggleText(item) {
  if ($('#' + item).hasClass("btn-warning")) {
    $('#' + item).text("-");
  } else {
    $('#' + item).text("+");
  }
}


var cart = {};
cart.items = [];

function setLocalStorage(id, flag) {
  if(flag) {
    cart.items.splice(cart.items.indexOf(id), 1);
  } else {
    cart.items.push(id);
  }
  console.log(JSON.stringify(cart));
  localStorage.setItem("cart", JSON.stringify(cart));
}

h3 {
  display: inline;
}

.list-inline {
  padding: 3rem 0;
}

li.well {
  margin: 0 2rem;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-3">
      <div class="well item-1-container">
        <p class="lead">
          Item 1
        </p>
        <button class="btn btn-primary" id="item-1" data-id="item-1">+</button>
      </div>
    </div>
    <div class="col-xs-3">
      <div class="well item-2-container">
        <p class="lead">
          Item 2
        </p>
        <button class="btn btn-primary" id="item-2" data-id="item-2">+</button>
      </div>
    </div>
    <div class="col-xs-3">
      <div class="well item-3-container">
        <p class="lead">
          Item 3
        </p>
        <button class="btn btn-primary" id="item-3" data-id="item-3">+</button>
      </div>
    </div>
    <div class="col-xs-3">
      <div class="well item-4-container">
        <p class="lead">
          Item 4
        </p>
        <button class="btn btn-primary" id="item-4" data-id="item-4">+</button>
      </div>
    </div>
  </div>
</div>

<hr />

<div class="container">
  <h3>The List</h3>
  <ul class="list-unstyled list-inline"></ul>
</div>

希望这会对你有所帮助。

Answer 2

我可以告诉你一些步骤。 首先制作一个项目数组，用于将所有添加的项目放入其中。 编写 getLocalStorage/setLocalstorage 方法。 在页面加载时，检查项目数组，如果它是空的，什么也不做，如果它有一些长度，创建动态模板并附加在 ul 中。

在函数中添加项目时，通过 push 函数继续在数组中添加相同的项目，同时将其设置为 localstorage。拼接数组以防在适当的索引处删除项目。

您将得到解决方案。请按照以上步骤试一试。