javascript - LocalStorage save and load JS Object - Stack Overflow

admin管理员组

文章数量:1388859

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

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

• javascript
• local-storage

Share Improve this question Follow edited Sep 13, 2017 at 7:47 Revo asked Sep 13, 2017 at 6:51 RevoRevo 15022 silver badges1010 bronze badges 6

• Have you tried JSON.parse(localStorage.getItem('features')) ? Also have a look at: stackoverflow./questions/11616630/… – user1338871 Commented Sep 13, 2017 at 6:53
• JSON parse/stringify ... localStorage can only store strings – Jaromanda X Commented Sep 13, 2017 at 6:53
• What is the typeof featureArrays? – Steven Commented Sep 13, 2017 at 6:54
• JSON.parse(localStorage.getItem('features')) throws unexpeted Token at position 0: [ (because [object Object],[object Object] is saved) – Revo Commented Sep 13, 2017 at 7:10
• As well as JSON.stringify, the geometry property looks like an object. So you will want so see if it has any options to serialize / deserialise it's data, and store / load this. – Keith Commented Sep 13, 2017 at 7:13

 |  Show 1 more ment

4 Answers 4

Sorted by: Reset to default 3

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.

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'));

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()));

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;
}

本文标签： javascriptLocalStorage save and load JS ObjectStack Overflow