Блог

В основном у меня есть страница с изображениями — под каждым из них есть кнопка «Мне нравится». Если изображение понравилось, его следует сохранить в localStorage, а затем отобразить на другой странице.

HTML-код простой (изображения и кнопки), что-то вроде этого:

         <img data-name="img1" src="photos/photography.jpg" >

        <button type="submit" data-name="img1">Click</button>
  

Это jQuery. Я пытаюсь сохранить понравившиеся фотографии в массив.

          $('button').click((e) => {
             const data = $(e.target).data();
             let arr = $("img");
             const item = arr.filter(v => v.name === data.name)
             let cart = [];
             try {
                 cart = localStorage.getItem('cart');
                 cart = JSON.parse(cart)
             } catch (error) {}
             cart.push(item)
             localStorage.setItem('cart', JSON.stringify(cart));

         })
  

И на странице с понравившимися изображениями я просто получаю элементы из локального хранилища, но, похоже, ничего не происходит.

Я хотел бы, если вы можете сказать мне, что я делаю не так. Заранее спасибо.

Ваша первоначальная проблема связана с неправильным использованием let внутри try catch . Однако вы можете удалить функцию try catch all together, по умолчанию присвоив корзине значение пустого массива.

 $('button').click(e => {
  //get the existing cart, or default to an empty new one
  let cart = JSON.parse( localStorage.getItem('cart') || '[]' );
  //you're only using the name, might as well grab just that
  let itemName = $(e.target).data('name');
  //find the item, same as before
  let item = $('img').filter(v => v.name === itemName);
  
  //add the item to the card
  cart.push(item);
  //put the cart back to storage
  localStorage.setItem('cart', JSON.stringify(cart));
});