![](/img/trans.png)
[英]How to retrieve a specific object from a JSON value stored in sessionStorage?
[英]How to retrieve objects from sessionStorage?
我正在生成菜餚(是對象)的列表,當用戶單擊按鈕時,InitializeFoodList()應該將選定的項目添加到sessionStorage。 然后在RetrieveDataFromCart()中,我想遍歷sessionStorage並在控制台中顯示所有這些項目。
問題是最終結果是item屬性為null或僅顯示最后添加的項,而下一個為null。
有人知道實現此目標的更好方法嗎?
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", JSON.stringify(element)); }); } } function RetrieveDataFromCart() { var elements = []; for (let i = 0; i < sessionStorage.length; i++) { var element = JSON.parse(sessionStorage.getItem(localStorage.key(i))); elements.push(element); console.log(element.name); } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <button onclick="InitializeFoodList()">Click me</button> <button onclick="RetrieveDataFromCart()">Retrieve</button> <ul id="foodList" class="list-inline"></ul> </div>
我只是將整個陣列保存在一個鍵下
然后,您可以在內存中的數組中添加/刪除或修改對象,並在每次更改數組時存儲修改后的數組
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中設置項目時,您每次都會添加“購物車”作為鍵,這樣會導致覆蓋存儲在sessionStorage中的項作為鍵值對存儲的先前值,並且鍵應該是唯一的,否則它會更新存儲在相同的鍵。
因此,我使用鍵名'cart'即'cart'+ i添加了i的值。 您可以根據用例使用任何唯一鍵。 其次,與其使用localStorage來獲取特定的密鑰,不如使用會話存儲(似乎有些錯字)
更新的代碼段
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);
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.