Javascript 如何从会话存储中检索对象？

我正在生成碟子列表（这些碟子是对象），当用户单击按钮时，InitializeFoodList（）会将所选项目添加到会话存储中。然后在RetrieveDataFromCart（）中，我想循环会话存储并在控制台中显示所有这些项目

问题是最终结果是item属性为null，或者它只是显示最后添加的项和下一个项为null

有人知道实现这一目标的更好方法吗

var列表=[{
id:1，
名称：“意大利面”，
价格:15,，
类别：“主要”，
图片SC：“图片/食物/意大利面.jpg”
},
{
id:2，
名称：“千层面”，
价格:20,，
类别：“主要”，
图片SC：“图片/食品/千层面.jpg”
},
{
id:3，
名称：“可口可乐”，
价格:5,，
类别：“饮料”，
图片sc:“images/food/cola.jpg”
},
{
id:4，
名称：“鸡”，
价格：12，
类别：“主要”，
图片sc:“images/food/chicken.jpg”
},
];
函数InitializeFoodList（）{
var foodList=$（“#foodList”）；
for（设i=0；i”+element.name+“”+element.price+“zł
”
“+buttonext+””）；
$（'#添加'+i）。单击（函数（）{
setItem（“cart”，JSON.stringify（元素））；
});
}
}
函数RetrieveDataFromCart（）{
var元素=[]；
for（设i=0；i

点击我
检索

我只需将整个阵列存储在一个键下即可

然后，您可以在内存中添加/删除或修改数组中的对象，并在每次更改时存储修改后的数组

function getStoredCart(){
    // return stored array and if not existing return an empty array
    return JSON.parse(sessionStorage.getItem('cart') || '[]')
}

function saveCart(array){
   sessionStorage.setItem("cart", JSON.stringify(array)); 
}

// example deleting item
function deleteItem(item){
    var itemIndex = cartList.indexOf(item)
    cartArray.splice(itemIndex,1); // remove from stored array       
    saveCart(cartArray ); // save it back into storage
}

// example adding item
function addItem(itemObject){       
    cartArray .push(itemObject); // push new object to array       
    saveCart(cartArray ); // save it back into storage
}


// keep array reference in variable whole time page is active
var cartArray = getStoredCart();

$.each(cartArray , function(i, item){
    // add the html for each item and use `item` reference in click handlers when doing modifications
})

---

您正在正确使用sessionStorage，但此代码段中存在一些问题。首先，在sessionStorage中设置项时，您每次都将“cart”添加为键，因此它会覆盖以前存储的值，因为sessionStorage中的项存储为键值对，键应该是唯一的，否则它会更新以前存储在同一键上的值

因此，我用键名“cart”增加了I的值，即“cart”+I。根据您的用例，您可以使用任何唯一键。 其次，不要使用本地存储获取特定的密钥，而是使用会话存储（似乎有点输入错误）

更新的代码片段

var list = [{
    id: 1,
    name: "Spaghetti",
    price: 15,
    category: "main",
    pictureSrc: "images/food/spaghetti.jpg"
},
{
    id: 2,
    name: "Lasagne",
    price: 20,
    category: "main",
    pictureSrc: "images/food/Lasagne.jpg"
},
{
    id: 3,
    name: "Coca-cola",
    price: 5,
    category: "drinks",
    pictureSrc: "images/food/cola.jpg"
},
{
    id: 4,
    name: "Chicken",
    price: 12,
    category: "main",
    pictureSrc: "images/food/chicken.jpg"
},
];

function InitializeFoodList() {

var foodList = $('#foodList');

for (let i = 0; i < list.length; i++) {
    const element = list[i];
    var buttonText = '<button class="btn btn-primary add" id="add' + i + '">+</button><button class="btn btn-primary" name="remove">-</button>';
    foodList.append("<li class='list-inline-item'><h4>" + element.name + "</h4><p>" + element.price + " zł</p><img alt=''height='200' width='200' class='img-thumbnail' src='" + element.pictureSrc + "'><br>" + buttonText + "</li>");
    $('#add' + i).click(function() {
    sessionStorage.setItem("cart" + i, JSON.stringify(element));
    });
}
}

function RetrieveDataFromCart() {

var elements = [];

for (let i = 0; i < sessionStorage.length; i++) {
    var element = JSON.parse(sessionStorage.getItem(sessionStorage.key(i)));
    elements.push(element);
    console.log(element.name);
}

}

var列表=[{
id:1，
名称：“意大利面”，
价格:15,，
类别：“主要”，
图片SC：“图片/食物/意大利面.jpg”
},
{
id:2，
名称：“千层面”，
价格:20,，
类别：“主要”，
图片SC：“图片/食品/千层面.jpg”
},
{
id:3，
名称：“可口可乐”，
价格:5,，
类别：“饮料”，
图片sc:“images/food/cola.jpg”
},
{
id:4，
名称：“鸡”，
价格：12，
类别：“主要”，
图片sc:“images/food/chicken.jpg”
},
];
函数InitializeFoodList（）{
var foodList=$（“#foodList”）；
for（设i=0；i”+element.name+“”+element.price+“zł
”
“+buttonext+””）；
$（'#添加'+i）。单击（函数（）{
setItem（“cart”+i，JSON.stringify（元素））；
});
}
}
函数RetrieveDataFromCart（）{
var元素=[]；
for（设i=0；i