Сохранение фотографии в локальном хранилище и отображение ее на другой странице - PullRequest
Новая
       14

Сохранение фотографии в локальном хранилище и отображение ее на другой странице

0 голосов
/ 06 марта 2019

В основном у меня есть страница с изображениями - под каждым из них есть кнопка «Мне нравится».Когда вам нравится, изображение должно быть сохранено в 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));

         })

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

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

1 Ответ

0 голосов
/ 06 марта 2019

Ваша первоначальная проблема связана с неправильным использованием let внутри try catch.Тем не менее, вы можете удалить все попытки перехвата, установив корзину по умолчанию в пустой массив. 

$('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));
});
...