Question

我遇到了这样的问题：我必须在图库中添加一些图像，重新加载页面之后它们仍然应该存在。我已经设法完成了这个，元素被添加到数组中，一切都很好。重新加载文档后，它们也在本地存储中。但是，重新加载文档后，尝试添加其他图片后，数组将被覆盖。所以代替： [img1, image, image, ..., imgn]我明白了再次[imgn, image, img2]。这是我的代码：

<script type="text/javascript">

        $(document).ready(function() {
          var imageList = [];
          $('.addPic').click(function() { 
                 var image = $(this).attr('data-image'); //this variable contains particular image ID
                 imageList.push(image);
                 localStorage.setItem("imageList", JSON.stringify(imageList)); 
          });
        });

</script>

我做错了什么？谢谢你的帮助。

Answer 1

在您显示的代码中，您永远不会使用您声明的存储。因此，您只存储imageList数组中当前存在的内容。

您应该通过读取本地存储来声明imageList：

var imageList = localStorage.getItem("imageList");

Answer 2

首先应该从localstorage中获取项目，以便将它们与要保存的新项目合并，然后再将它们实际保存回localstorage。在这个例子中你也不需要imageList变量。

<script type="text/javascript">
    var LIST_ID = 'imageList';

    $(document).ready(function() {
          $('.addPic').click(function() { 
              var image = $(this).attr('data-image'),
                  items= JSON.parse(localStorage.getItem(LIST_ID)) || []; 

              items.push(image);
              localStorage.setItem(LIST_ID, JSON.stringify(items)); 
          });
     });

</script>

HTML5 LocalStorage重新加载文档

2 个答案: