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) 

UPDATE：https://jsfiddle.net/ytc26fju/3/。点の上にカーソルを置くと配列が更新されます。 [保存]をクリックし、次に[ロード]ボタンをクリックします。

Answer 1

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 2

JSONに変換して（JSON.stringifyで）保存し、localStorageがオブジェクトではなく文字列を格納するため、構文解析する必要があります。

エラーTypeError: Converting circular structure to JSONは、データ構造は、プロパティ...無限としてaオブジェクト持つプロパティとしてbオブジェクト持つオブジェクトaがあります固有のループを有することを意味します。明らかに、これは無限ループなので「書く」ことはできません。あなたが保存しようとしているオブジェクトを通過すると、どこが間違っているのかがわかるでしょう。featureArrayに物事を押しつけるのが非常に誘発されるようです。

Answer 3

アイテムをローカルストレージに設定します。

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

商品をローカルストレージから取得します。

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

Answer 4

はそれを手に入れました。理由を完全に理解することはできませんが、フィーチャオブジェクトは循環構造に影響します。私はしなければならなかった：

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