LocalStorage保存并加载JS对象

Question

我正在尝试通过localstorage保存由多个JS对象组成的数组。

我猜我在将JS对象的数组推向localstorage，然后检索并解析时遇到了失败的麻烦，但是没有解决方案。

var featureArray=[];
map.on('click', function(evt) {
  if (feature) {
    featureArray.push(feature.values_);
  }
});
function saveFeatures() {
  localStorage.setItem('features', featureArray);
}
saveFeatures();

当我尝试通过localStorage.getItem('features')加载它们时，输出就像：

[对象对象]，[对象对象]

，但我实际上希望保存此结构背后的值。

我尝试了localStorage.setItem('features', JSON.stringify(featureArray))，但这引发了错误

TypeError：将圆形结构转换为JSON

我在做什么错？

console.log（featurearray）的输出：

(2) [{…}, {…}]
0:
    geometry:ol.geom.MultiPolygon {pendingRemovals_: {…}, dispatching_: {…}, listeners_: {…}, revision_: 2, ol_uid: 39, …}
    krs:"Niedersachsen"
    sumarea_1_2014:20298
    sumarea_1_2015:16045
    sumarea_1_2016:19008
    sumarea_3_2014:3888
    sumarea_3_2015:27971
    sumarea_3_2016:15520
    sumarea_5_2014:11888
    sumarea_5_2015:14671
    sumarea_5_2016:31307
    __proto__:Object
1:
    geometry:ol.geom.MultiPolygon {pendingRemovals_: {…}, dispatching_: {…}, listeners_: {…}, revision_: 2, ol_uid: 41, …}
    krs:"Nordrhein-Westfalen"
    sumarea_1_2014:23100
    sumarea_1_2015:2399
    sumarea_1_2016:21916
    sumarea_3_2014:11375
    sumarea_3_2015:31563
    sumarea_3_2016:20300
    sumarea_5_2014:859
    sumarea_5_2015:20633
    sumarea_5_2016:31101
    __proto__:Object
length:2
__proto__:Array(0)

更新：https：//jsfiddle.net/ytc26fju/3/。悬停在点上以更新数组。然后单击保存，然后单击"加载"按钮。

Answer 1

您确实需要将其转换为JSON将其存储（使用JSON.STRINGIFY）并在LocalStorage商店字符串而不是对象的路上分析。

错误 TypeError: Converting circular structure to JSON表示您的数据结构具有固有的循环，其中有一个对象a将对象b作为属性，然后将对象a作为属性... ad infinitum。显然，您不能"写出此内容"，因为它是一个无限的循环。浏览您要保存的对象，您可能会看到它出错的位置 - 您似乎很高兴将东西推到featureArray。

Answer 2

在本地存储中设置项目。

localStorage.setItem('features', JSON.stringify(featureArray));

从本地存储中获取项目。

var data = JSON.parse(localStorage.getItem('features'));

Answer 3

JSON.stringify接受替换器参数，该参数将帮助您在串制对象时摆脱循环对象。

这是一个非常简单的实现，它将将循环对象的第二次转换为 null：

function cyclicsCleaner() {
  var seenObjects = [];
  return function cleanCyclics(key, obj) {
    if (obj && typeof obj === 'object') {
      if (seenObjects.indexOf(obj) !== -1) {
        return null;
      }
      seenObjects.push(obj);
    }
    return obj;
  }
}
// generate a cyclic object
var a = {};
var b = {
  cyclic: a
};
a.b = b;
console.log(JSON.stringify(a, cyclicsCleaner()));

Answer 4

得到了它。不要完全理解原因，但是特征对象帽子是圆形结构。我必须做：

for (i=0;i<featureArray.length;i++) {
  delete featureArray[i].geometry;
}