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

Question

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

但是，我希望如果用户刷新页面或决定离开，列表中的项目仍然存在。

这是没有任何本地存储的功能购物车的片段。

$(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>

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

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

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。拼接数组，以防在正确的索引处删除项目。

你会得到解决方案。请尝试上述步骤。