如何在本地存储中存储和检索购物车项目？
如何在本地存储中存储和检索购物车项目？
提问于 2019-03-25 05:26:35
我正在为一个电子商务网站创建购物车，并希望将产品存储在浏览器本地存储中。
我在代码中实现了以下函数来添加和检索产品
addToCart()是每次按下Add to Cart按钮时启动的函数。
addProduct()将每个产品添加到cartList。
getProductsFromLocalStorage()从localStorage检索产品并将产品添加到cartList。
function addToCart(trigger) {
var cartIsEmpty = cartWrapper.hasClass('empty');
//get localstorage cart product list
getProductsFromLocalStorage();
//update cart product list
addProduct();
//update number of items
updateCartCount(cartIsEmpty);
//update total price
updateCartTotal(trigger.data('price'), true);
//show cart
cartWrapper.removeClass('empty');
}
function addProduct() {
productId = productId + 1;
var productName = document.getElementById('reebok').innerHTML;
var productPrice = document.getElementById('p_price').getAttribute('data- value');
var image = document.getElementById("main_img").src;
var productSize = document.getElementById('size').value;
var productColor = document.getElementById('color').value;
value = parseFloat(productPrice).toFixed(2);
var productAdded = $('<li class="product"><div class="product-image"><a href="#0"><img src="'+ image +'" alt="placeholder"></a></div><div class="product-details"><h3><a href="#0">' + productName + '</a></h3><span class="price">'+ productPrice +'</span><div class="actions"><a href="#0" class="delete-item">Delete</a><a class="delete-item">'+ productSize +'</a><a class="delete-item">'+ productColor +'</a><div class="quantity"><label for="cd-product-' + productId + '">Qty</label><span class="select"><select id="cd-product-' + productId + '" name="quantity"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option></select></span></div></div></div></li>');
cartList.append(productAdded);
let products = [{'productId' : productId + 1, image : image, name : productName, price: productPrice, size: productSize, color: productColor}];
localStorage.setItem('products', JSON.stringify(products));
}
function getProductsFromLocalStorage() {
const cs = localStorage.getItem('products');
if (cs === null) {
addProduct();
} else {
$.each(cs.products, function(key, value) {
cartList.prepend($('<li class="product"><div class="product-image"><a href="#0"><img src="'+ value.image +'" alt="placeholder"></a></div><div class="product-details"><h3><a href="#0">' + value.name + '</a></h3><span class="price">${value.price}</span><div class="actions"><a href="#0" class="delete-item">Delete</a><a class="delete-item">' + value.size + '</a><a class="delete-item">' + value.color + '</a><div class="quantity"><label for="cd-product-' + value.productId + '">Qty</label><span class="select"><select id="cd-product-' + value.productId + '" name="quantity"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option></select></span></div></div></div></li>'));
});
}
}我现在遇到了无法从本地存储中检索购物车项目并将其添加到购物车中的问题。这意味着购物车项目被保存在存储中，但当我尝试添加新项目时，我看到一个空白的购物车，如下所示：
这段代码的演示位于https://codyhouse.co/demo/add-to-cart-interaction/index.html。
感谢你的帮助，
詹姆斯。
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-03-25 05:46:05
你应该为它使用浏览器的本地存储。
在您的函数addProduct中，您应该将产品数组添加到本地存储项中，例如products；如下所示：
function addProduct(){
let products = [];
if(localStorage.getItem('products')){
products = JSON.parse(localStorage.getItem('products'));
}
products.push({'productId' : productId + 1, image : '<imageLink>'});
localStorage.setItem('products', JSON.stringify(products));
}如果你想移除product，你可以这样做：
function removeProduct(productId){
// Your logic for your app.
// strore products in local storage
let storageProducts = JSON.parse(localStorage.getItem('products'));
let products = storageProducts.filter(product => product.productId !== productId );
localStorage.setItem('products', JSON.stringify(products));
}请查看此fiddle以获取有效的演示。
Stack Overflow用户
发布于 2019-03-25 05:30:10
使用这个javascript包在浏览器的indexDB中存储任何类型的数据，这样数据在重新加载后仍然存在。localforage
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55328748
复制相关文章
相似问题