Question

基本上，我的页面带有图像-在每个图像下方都有一个按钮。喜欢时，应将图像保存在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));

         })

在带有喜欢图像的页面上，我只是从本地存储中获取项目，但似乎什么也没有发生。

如果您能告诉我我在做什么错，我想。预先感谢。

Answer 1

您的原始问题是由于尝试捕获中的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));
});

将照片保存在本地存储中并在另一页上显示

1 个答案: