Как получить объекты из sessionStorage? - PullRequest
Новая
       32

Как получить объекты из sessionStorage?

0 голосов
/ 27 мая 2018

Я создаю список блюд (которые являются объектами), и когда пользователь нажимает кнопку InitializeFoodList () должен добавить выбранный элемент в sessionStorage.Затем в RetrieveDataFromCart () я хочу перебрать sessionStorage и показать все эти элементы в консоли.

Проблема заключается в том, что конечный результат состоит в том, что свойство элемента равно нулю или оно просто показывает последний добавленный элемент и следующий.равны нулю.

Кто-нибудь знает лучший способ добиться этого? 

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>

Ответы [ 2 ]

0 голосов
/ 27 мая 2018

Вы правильно используете sessionStorage, но в этом фрагменте есть некоторые проблемы.Во-первых, при настройке элемента в sessionStorage вы каждый раз добавляете «корзину» в качестве ключа, так что это приводит к переопределению предыдущего значения, сохраненного, так как элементы в sessionStorage хранятся в виде пар «ключ-значение», а ключи должны быть уникальными, в противном случае обновляется предыдущее значение, сохраненное втот же ключ.

Итак, я добавил значение i с именем ключа 'cart' т.е. 'cart' + 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);
}

}
0 голосов
/ 27 мая 2018

Я бы просто держал весь массив в хранилище под одним ключом

Тогда вы можете добавлять / удалять или изменять объекты в массиве в памяти и сохранять измененный массив каждый раз, когда вы меняете его 

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
})
...