如何使用localStorage存储简单的购物车? [英] How do I store a simple cart using localStorage?

问题描述

我正在尝试为我正在研究的原型项目创建一个JavaScript购物车.我意识到在这种情况下，像Angular/Knockout等MVC框架将是绝对完美的，但我仍在学习如何使用它们，因此无法在特定项目中使用它们.我也意识到我可以维护购物车服务器端，但是在这种情况下这不是一个选择.

I'm trying to create a javascript cart for a prototype project I'm working on. I realise that in this situation an MVC framework like Angular/Knockout etc would be absolute perfect but I'm still learning how to use those so I can't use them for this particular project. I also realise I could maintain the cart server-side but that's not an option in this scenario.

目前，我有这样的html产品列表:

At the moment I have a list of html products like so:

<ul id="products">
  <li data-id="1" data-name="Product 1" data-price="10.00">
    <input type="text" /><br />
    <button>Add to cart</button>
  </li>
  <li data-id="2" data-name="Product 2" data-price="15.00">
    <input type="text" /><br />
    <button>Add to cart</button>
  </li>
  <li data-id="3" data-name="Product 3" data-price="20.00">
    <input type="text" /><br />
    <button>Add to cart</button>
  </li>
</ul>

在页面加载时，我在localStorage中创建一个空的购物车"对象，如下所示:

On page load I create an empty 'cart' object in localStorage like so:

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

localStorage.setItem('cart', JSON.stringify(cart));

然后将绑定绑定到button元素的click事件:

I've then bound to the click event of the button element as so:

$('button').on('click', function(e) {
    var product = $(this).parent();

    var quantity = $(product).find('input[type=text]').val();

    // Ensure a valid quantity has been entered
    if (!isValidInteger(quantity) === true) {
        alert('Please enter a valid quantity');
        return;
    }

    product.id = $(product).attr('data-id');
    product.name = $(product).attr('data-name');
    product.price = $(product).attr('data-price');
    product.quantity = quantity;

    addToCart(product);
});

然后，我编写了一个addToCart()函数，该函数应该使用此产品，并尝试将其推入具有'cart'属性的'products'数组中:

I've then written an addToCart() function that should take this product and try to push it into the 'products' array that's a property of 'cart':

function addToCart(product) {
    // Retrieve the cart object from local storage
    if (localStorage && localStorage.getItem('cart')) {
        var cart = JSON.parse(localStorage.getItem('cart'));            

        cart.products.push(product);

        localStorage.setItem('cart', JSON.stringify(cart));
    } 
}

这不起作用，并且出现错误:

This isn't working and I'm getting an error:

Uncaught TypeError: Converting circular structure to JSON

我不明白我要去哪里错了，有人可以帮忙吗?

I don't understand where I'm going wrong, is anyone able to help?

这个问题解决后，我对如何保持购物车的状态也有些困惑.我希望可以通过存储产品ID，名称，价格和数量，然后将其反映在html的购物车" div中，将所有数据存储在localStorage的购物车"对象中.如果添加/删除了项目，我将更新本地存储中的购物车"对象，然后在html中反映所做的更改.

Also once this is resolved, I'm a little confused as to how I'm to maintain the state of the cart. I was hoping I could store all the data in the 'cart' object in localStorage by storing the product ids, names, prices and quantities and then reflecting this in a 'cart' div within the html. If items are added/removed, I'll update the 'cart' object in local storage and then reflect the changes within the html.

有没有更简单的方法可以做到这一点?我真的可以使用一些指向正确方向的指示.

Is there a simpler way to do this? I could really use some pointing in the right direction.

再一次，我意识到使用Angular甚至维护状态服务器端将是一个最佳解决方案，但是对于这个项目，我只能使用jquery/javascript，因此我需要在自己的范围内工作.

Once again I realise that using Angular or even maintaining the state server-side would be an optimal solution but for this project I'm only able to use jquery/javascript so I need to work within my boundaries.

谢谢！

推荐答案

您应该为商品声明一个单独的对象.

You should declare a separate object for your product item.

$('button').on('click', function(e) {
    var li = $(this).parent();

    var quantity = $(li).find('input[type=text]').val();

    // Ensure a valid quantity has been entered
    if (!isValidInteger(quantity) === true) {
        alert('Please enter a valid quantity');
        return;
    }

    var product = {};
    product.id = $(li).attr('data-id');
    product.name = $(li).attr('data-name');
    product.price = $(li).attr('data-price');
    product.quantity = quantity;

    addToCart(product);
});

这篇关于如何使用localStorage存储简单的购物车?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！