Javascript HTML5本地存储重新加载文档

我遇到了这样一个问题：我必须向图库中添加一些图像，在重新加载页面后，它们应该仍然存在。我已经设法做到了，元素被添加到数组中，一切都很好。重新加载文档后，它们也在本地存储中。但是，在重新加载文档并尝试添加一些其他图片后，阵列将被覆盖。 因此，不是：

[img1，图像，图像，…，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>

$（文档）.ready（函数（）{
var imageList=[]；
$（'.addPic'）。单击（函数（）{
var image=$（this）.attr（'data-image'）；//此变量包含特定的图像ID
imageList.push（图像）；
setItem（“imageList”，JSON.stringify（imageList））；
});
});

---

我做错了什么，伙计们？谢谢您的帮助。

在您显示的代码中，您从未使用您声明的存储。因此，您只能存储

imageList

数组中当前存在的内容

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

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

---

在您展示的代码中，您从未使用您声明的存储。因此，您只能存储

imageList

数组中当前存在的内容

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

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

---

您应该首先从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>

var LIST_ID='imageList'；
$（文档）.ready（函数（）{
$（'.addPic'）。单击（函数（）{
var image=$（this.attr（'data-image'），
items=JSON.parse（localStorage.getItem（LIST_ID））||[]；
项目。推送（图像）；
setItem（LIST_ID，JSON.stringify（items））；
});
});

您应该首先从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>

var LIST_ID='imageList'；
$（文档）.ready（函数（）{
$（'.addPic'）。单击（函数（）{
var image=$（this.attr（'data-image'），
items=JSON.parse（localStorage.getItem（LIST_ID））||[]；
项目。推送（图像）；
setItem（LIST_ID，JSON.stringify（items））；
});
});

我刚刚探索了一些东西。仅当列表中已有某些元素时，此操作才有效。否则我会得到一个错误：TypeError:null不是一个对象（计算'items.push'），这是因为items变量在该点上不是数组。查看我的编辑以获得修复。我刚刚探索了一些东西。仅当列表中已有某些元素时，此操作才有效。否则我会得到一个错误：TypeError:null不是一个对象（计算'items.push'），这是因为items变量在该点上不是数组。请参阅我的编辑以获得修复。