LocalStorage save and load JS Object

问题

I'm trying to save an array consisting of multiple JS objects via localStorage.

I guess I'm having the same trouble as Fail when pushing an array of js objects to localStorage and then retrieving it and parsing, but there's no solution to it.

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

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

when I try to load them via localStorage.getItem('features') the output is something like:

[object Object],[object Object]

But I actually want the values behind this structure to be saved.

I tried localStorage.setItem('features', JSON.stringify(featureArray)) , but that throws the error

TypeError: Converting circular structure to JSON

What am I doing wrong?

console.log(featureArray)'s output:

(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/ . hover over the dot to update the array. then click save and then the load button.

回答1:

JSON.stringify accepts an replacer parameter which will help you get rid of cyclic object while stringifying your object.

Here is a really simple implementation which will convert the second occurrence of a cyclic object to 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()));

回答2:

You do need to convert it to JSON to store it (with JSON.stringify) and parse it on the way out as localStorage stores strings and not objects.

The error TypeError: Converting circular structure to JSON means your data structure has an inherent loop where there's an object a that has object b as a property, which then has object a as a property...ad infinitum. Clearly you can't "write this out" as it's an infinite loop. Go through the object you are trying to save and you will probably see where it's going wrong - you seem to be pretty triggerhappy of pushing stuff to your featureArray.

回答3:

Set the item in local storage.

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

Get the item from local storage.

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

回答4:

Got it. Don't fully understand why, but a feature Object hat a circular structure. I had to do:

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

来源：https://stackoverflow.com/questions/46190722/localstorage-save-and-load-js-object

标签

javascript

local-storage