将所选项目存储在localStorage中，稍后进行渲染

Question

我正在开发一个cart应用程序。我有一个json文件，它存储菜单项列表，我通过创建forEach循环并使用document.createElement((和appendChild((，使用Javascript将其呈现为HTML。现在，当用户单击Add to Cart时，我会存储该菜单项的详细信息，并从json文件中找到它的价格，然后调用助手函数来计算最终价格。

我的疑虑：
我想将用户选择的项目存储在localStorage中，然后使用localStorage来呈现购物车详细信息。我该怎么做？你能给我看一段与我的代码相关的代码吗。此外，我需要将菜单项的图像的详细信息存储在localStorage中。

某些代码：
store.js

//When "Add to Cart" button is clicked, this function is triggered
function addToCartClicked(event) {
//Getting all the details of the pizza item that was clicked
var button = event.target;
var shopItem = button.parentElement.parentElement;
var title = shopItem.getElementsByClassName("shop-item-title")[0].innerText;
var price = shopItem.getElementsByClassName("shop-item-price")[0].innerText; //in the form of Rs. 400
var sizePrices = document.getElementsByName("sizes"); //get all the radio buttons which have name="sizes"
var size_price;
for (var i = 0; i < sizePrices.length; i++) {
//check among all the sizePrices, whether it is checked or not
if (sizePrices[i].checked) {
size_price = sizePrices[i].value;
//Added break, because only one radio button ccould be selected at one time
break;
}
}
//console.log(size_price);
var imageSrc = shopItem.getElementsByClassName("shop-item-image")[0].src;
price = parseFloat(price.replace("Rs.", "")) + parseFloat(size_price);
console.log(price);
//price = parseFloat(price.replace("Rs.", "")) + size_price;
addItemToCart(title, price, imageSrc, size_price);
updateCartTotal();
}
//utility function for addToCartClicked
//This will make sure that a new cart row is created under CART
function addItemToCart(title, price, imageSrc, size_price) {
var cartRow = document.createElement("div");
cartRow.classList.add("cart-row");
var cartItems = document.getElementsByClassName("cart-items")[0];
var cartItemNames = cartItems.getElementsByClassName("cart-item-title");
//Putting the data
var cartRowContents = `
<div class="cart-item cart-column">
<img class="cart-item-image" src="${imageSrc}" width="100" height="100">
<span class="cart-item-title">${title}</span>
<span class="cart-item-size">"Rs.${size_price}"</span>
</div>
<span class="cart-price cart-column">${price}</span>
<div class="cart-quantity cart-column">
<input class="cart-quantity-input" type="number" value="1">
<button class="btn btn-danger" type="button">REMOVE</button>
</div>`;
cartRow.innerHTML = cartRowContents;
cartItems.append(cartRow);
cartRow
.getElementsByClassName("btn-danger")[0]
.addEventListener("click", removeCartItem);
cartRow
.getElementsByClassName("cart-quantity-input")[0]
.addEventListener("change", quantityChanged);
}

data.json

{
"pizza": [
{
"id": 1,
"name": "Tandoori Pizza",
"image": "Images/pizza.png",
"price": "Rs.200",
"sizes": { "Small": 100, "Medium": 200, "Large": 300 }
},
{
"id": 2,
"name": "Veggie Supreme",
"image": "Images/pizza.png",
"price": "Rs.250",
"sizes": { "Small": 100, "Medium": 200, "Large": 300 }
}
]
}

我是本地存储概念的新手。请告诉我如何将所选项目存储在localStorage中，并使用它在Cart items下进行渲染。请注意，我想使用纯Javascript来完成这一切。

Answer 1

localStorage文档来源的存储对象存储的数据在浏览器会话中保存。

使用setItem((可以在浏览器中存储数据。

然后，通过使用getItem((，您可以从浏览器中检索数据。

var cartObj = {
'id': 1,
'name': 'Tandoori Pizza',
'image': 'Images/pizza.png',
'price': '200'
};
// Put the object into storage
localStorage.setItem('cartMenu', JSON.stringify(cartObj));
// Retrieve the object from storage
var menuItemInCart = localStorage.getItem('cartMenu');
console.log('menuItemInCart: ', JSON.parse(menuItemInCart));

在JSFiddle示例中，请看一看。

Answer 2

首先，创建一个如下文件：config.js

export default {
// json goes here
}

然后做这个

import json form './config.js'
var parsed = JSON.parse(json);
window.localStorage.setItem('cart', parsed); // sets the item in localStorage