Question

我试图通过localStorage保存一个由多个JS对象组成的数组。

我想我遇到与Fail when pushing an array of js objects to localStorage and then retrieving it and parsing相同的麻烦，但是没有解决方法。

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

function saveFeatures() {
  localStorage.setItem('features', featureArray);
}
saveFeatures();

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

[object Object]，[object Object]

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

我尝试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作为财产...广告无限。显然你不能“写出来”，因为它是一个无限循环。浏览你想要保存的对象，你可能会看到它出错的地方 - 你似乎非常乐意将内容推送到featureArray。

Answer 2

将项目设置为本地存储。

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

从本地存储中获取该项目。

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

Answer 3

JSON.stringify接受replacer参数，该参数可帮助您在对对象进行字符串化时删除循环对象。

这是一个非常简单的实现，它将循环对象的第二次出现转换为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;
}

LocalStorage保存并加载JS对象

4 个答案: