Javascript 如何在本地存储中存储多个项目？

我正在使用传单.js库制作地图。我有一个事件，在右键单击时在地图上放置一个标记，我想将每个标记的坐标保存到一个数组或一个对象数组中。然后我想将它们存储在本地存储中

var customLayer = new L.layerGroup();
myMap.on('contextmenu', function(e) {

  var marker = L.marker(e.latlng,
  {icon : flagIcon,
    draggable: true,
    zIndexOffset : 1000}).addTo(customLayer).addTo(myMap);
    customLayer.addTo(myMap);
  marker.bindPopup("<b>Custom</b>").openPopup();
  });

如果你能给我一个提示，我将不胜感激。如果有人想要，这里是传单文档：

正如我最后一个关于传单的问题一样，我对20个或更多的问题进行了广泛的研究，但没有找到任何答案。我承认可能是我问错了问题。如果是的话，请告诉我

编辑 我在我的事件函数中使用了它，但它只保存最后放置的项目的值

  myStorage = window.localStorage;
  mystorage.setItem('coords', e.latlng);

编辑2

我根据其中一个答案尝试了下面的方法，但什么也没发生

var layers = customLayer.getLayers();
var i;
for(i=0; i<layers.length; i++){
  layers[i];//it is what a super class for marker.
 //store them away
 myStorage = window.localStorage;
 myStorage.setItem('coords', layers[i].getLatLng());
}

}))

我从下面的一个答案中尝试了上面的代码，localStorage只是输出未定义。我尝试将字符串作为参数传递，但这给了我意外的字符串错误。然后我将参数更改为变量，并将字符串赋给它，但它仍然不起作用。然而，我找到了解决这个问题的方法，并将其发布在下面

// on page load
var coordinates = [];

// in the event function
coordinates.push(e.latlng);

然后，您应该能够将其存储为字符串化JSON。考虑使用帮助函数，例如：

function setJSON(key, value) {
    window.localStorage.setItem(key, JSON.stringify(value));
}
function getJSON(key) {
    return JSON.parse(window.localStorage.getItem(key));
}

然后存储数组

setJSON('clickedPoints', coordinates);

以后您可以像这样检索它

getJSON('clickedPoints');   

---

我只是想阅读文档并在这里提供帮助……看起来您知道如何使用

LocalStorage

，但正在尝试了解如何循环图层组。而且似乎不止一种方法

你试过了吗

var layers = customLayer.getLayers();
var i;
for(i=0; i<layers.length; i++){
  layers[i];//it is what a super class for marker.
 //store them away
}

---

使用上面一个答案的事件部分，我为包含坐标的数组创建了一个forEach，并使用localStorage.setItem方法将坐标作为参数。代码如下：

var coordinates = [];
var customLayer = new L.layerGroup();
myMap.on('contextmenu', function(e) {
  var marker = L.marker(e.latlng,
  {icon : flagIcon, draggable: true, zIndexOffset : 
1000}).addTo(customLayer).addTo(myMap);
  marker.bindPopup("<b>Custom</b>").openPopup();
  customLayer.addTo(myMap);
  coordinates.push(e.latlng);
  console.log(coordinates);

  coordinates.forEach(function() {
    window.localStorage.setItem('customCoords', 
JSON.stringify(coordinates));

  });

var坐标=[]；
var customLayer=新的L.layerGroup（）；
myMap.on（'contextmenu'，函数（e）{
var marker=L.marker（即latlng，
{icon:flagIcon，draggable:true，zIndexOffset:
1000}）.addTo（customLayer.addTo（myMap）；
marker.bindPopup（“自定义”）.openPopup（）；
customLayer.addTo（myMap）；
坐标。推（如拉特林）；
控制台日志（坐标）；
coordinates.forEach（函数（）{
window.localStorage.setItem（'customCoords'，
stringify（坐标））；
});

这将坐标存储在一个对象数组中，其中customCoords作为localStorage中的键

编辑

---

我对如何使用Anders的答案感到困惑，但他为我澄清了。我的答案有效，但他的答案更优雅。

好的，但我的示例存储了多个键值对，这是怎么回事？我事先不知道这些值，所以我如何从customLayer获得它们？一篇文章中有两个问题。我的答案只说明了如何使用c存储对象（键/值对）。执行以下操作：setJSON（'customCoords'，customCoords），然后用于检索getJSON（'customCoords'）好心的先生，如果你读了我的整个问题，你就会知道我的循环不起作用。问多个问题和问复杂的问题是不同的情况。谢谢你花时间回答我。现在我明白了，我对这个问题的措辞很糟糕。我应该问如何从循环中添加到本地存储。你实际上是对的我想这不是多个问题。第一个问题是如何从customLayer数组中获取坐标。第二个问题是如何从循环中将项设置为本地存储。既然你的答案应该是回答第二部分，你能对你的答案做更多解释吗？键和值是“coords”和“坐标[I]”？更新的answer.JSON.stringify允许您在本地存储中存储非原始值，例如数组，因此不需要循环。您做了很好的研究，抱歉之前过于苛刻。祝您好运！向我展示您尝试保存到本地存储的部分..在底部附近为您编辑。因此，您正在努力在LayerGro上进行循环到那时为止，您是否尝试过customLayer.getLayer（）.forEach（）呢？尝试使用

eachLayer

方法来解决保存多个

coords

的问题，这可能会有所帮助：你能告诉我文档中的哪些地方让你得出了这些结论吗？我用其中一种方法更新了我的答案。我知道它一定是错的，但在我看来它应该会起作用。有什么想法吗？

var layers = customLayer.getLayers();
var i;
for(i=0; i<layers.length; i++){
  layers[i];//it is what a super class for marker.
 //store them away
}

group.eachLayer(function (layer) {
    layer;//use layer to get what you want.
});

var coordinates = [];
var customLayer = new L.layerGroup();
myMap.on('contextmenu', function(e) {
  var marker = L.marker(e.latlng,
  {icon : flagIcon, draggable: true, zIndexOffset : 
1000}).addTo(customLayer).addTo(myMap);
  marker.bindPopup("<b>Custom</b>").openPopup();
  customLayer.addTo(myMap);
  coordinates.push(e.latlng);
  console.log(coordinates);

  coordinates.forEach(function() {
    window.localStorage.setItem('customCoords', 
JSON.stringify(coordinates));

  });