Javascript-如何在HTML中显示SessionStorage obj
我在sessionStorage中有对象数据,我想通过循环在HMTL中将它们显示为列表。我如何做到这一点 SesionStorage.cart数据字符串化:Javascript-如何在HTML中显示SessionStorage obj,javascript,html,Javascript,Html,我在sessionStorage中有对象数据,我想通过循环在HMTL中将它们显示为列表。我如何做到这一点 SesionStorage.cart数据字符串化: [{"itemName":"WS: FaceShield, 10pcs pack","itemPrice":0,"itemQuantity":"1"},{"itemName":"Faceshield, 1 pc","itemPrice":0,"itemQuantity":"1"}] 我现在要做的是,在再次将它们解析为JSON对象后,将它们
[{"itemName":"WS: FaceShield, 10pcs pack","itemPrice":0,"itemQuantity":"1"},{"itemName":"Faceshield, 1 pc","itemPrice":0,"itemQuantity":"1"}]
我现在要做的是,在再次将它们解析为JSON对象后,将它们显示在列表中。假设您有
<ul id="myUL"></ul>
编写一个循环,创建
元素并将它们附加到DOM中。请阅读并创建一个您的最佳尝试。
// Let's define our array
const arr = [
{"itemName":"WS: FaceShield, 10pcs pack","itemPrice":0,"itemQuantity":"1"},
{"itemName":"Faceshield, 1 pc","itemPrice":0,"itemQuantity":"1"}
];
// Store it into LS...
localStorage.arr = JSON.stringify(arr);
// Read it from LS
const LS_arr = JSON.parse(localStorage.arr);
// Create a helper for new elements...
const ELNew = (sel, attr) => Object.assign(document.createElement(sel), attr || {});
// Loop the array and create LI elements
const LIS = LS_arr.reduce((DF, item) => {
DF.append(ELNew('li', {
textContent: `Name: ${item.itemName} Price: ${item.itemPrice}`
}));
return DF;
}, new DocumentFragment());
// Once our DocumentFragment is populated - Append all at once!
document.querySelector("#myUL").append(LIS);