javascript - LocalStorage保存和加载JS对象

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: Converting circular structure to 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:将循环结构转换为 JSON 意味着您的数据结构具有固有循环，其中存在一个对象 a ，该对象具有对象 b作为属性，然后将对象 a 作为属性......无穷无尽。显然你不能“写出来”，因为它是一个无限循环。浏览一下您尝试保存的对象，您可能会发现哪里出了问题 - 您似乎非常乐意将内容推送到您的 featureArray。