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

【问题标题】：How do I store multiple items in local storage?如何在本地存储中存储多个项目？
【发布时间】：2018-10-01 00:47:40
【问题描述】：

我正在使用 Leaflet.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();
  });

我确实尝试在本地存储中设置值，但它只保存了第一个键：值对。然后我考虑迭代存储 customMarkers 的数组，但我收到一个错误，即 customLayer.forEach 不是函数。

  customLayer.forEach(function(marker) {
  var customCoords = marker.getLatLng();
  console.log(customCoords);

  });

在这里，我将非常感谢您的提示。如果有人想要，这里是传单文档：

https://leafletjs.com/reference-1.3.4.html

与我上一个关于 Leaflet 的问题一样，我对 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());
}

});

编辑 3

  function setJSON(customCoords, coordinates) {
    customCoords = 'customCoords';
      window.localStorage.setItem(customCoords, 
JSON.stringify(coordinates));
  }

});

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

【问题讨论】：

显示您尝试保存到本地存储的部分..
在底部附近为您编辑。
那么您正在为在 LayerGroup 上循环而苦苦挣扎，您是否尝试过 customLayer.getLayer().forEach()？
尝试使用eachLayer方法leafletjs.com/reference-1.3.4.html#layergroup-eachlayer
关于保存多个coords的问题，这可能会有所帮助：stackoverflow.com/a/49966216/9613505

标签： javascript leaflet

【解决方案1】：

// 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');

【讨论】：

好的，但是这如何与我的示例存储多个键值对一起工作？我事先不知道这些值，那么如何从 customLayer 中获取它们？
您在一篇文章中有两个问题。我的回答仅涉及如何存储对象（键/值对）。通过这样做： setJSON('customCoords',customCoords) 然后检索 getJSON('customCoords')
好心先生，如果您阅读了我的整个问题，您就会知道我的循环不起作用。问多个问题和问复杂问题是不同的情况。感谢您抽出宝贵时间回复
我现在明白了，我对这个问题的措辞很糟糕。我应该问如何从循环中添加到本地存储。我想你实际上是对的，它是多个问题。首先是如何从 customLayer 数组中获取坐标。第二个是如何从循环中将项目设置为本地存储。由于您的答案应该回答第二部分，您能否对您的答案进行更多解释？键和值是 "coords" 和 "coordinates[i]" 吗？
更新了答案。 JSON.stringify 允许您存储非原始值，例如在本地存储中的数组，因此不需要循环。你做了很好的研究，对不起，如果之前很苛刻。祝你好运！

【解决方案2】：

我只是想阅读文档并在这里提供帮助...看来您知道如何使用LocalStorage，但想弄清楚如何循环 LayerGroups。而且方法似乎不止一种。

你试过了吗？：

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

【讨论】：

您能告诉我文档中的哪些地方导致您得出这些结论吗？
我用其中一种方法更新了我的答案。我知道这一定是错的，但在我看来它应该可以工作。有什么想法吗？

【解决方案3】：

使用上述答案之一的事件部分，我为包含坐标的数组创建了一个 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));

  });

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

编辑

我对如何使用安德斯的答案感到困惑，但他为我解决了问题。我的答案有效，但他的更优雅。

【讨论】：