LocalStorage保存并加载JS对象

我想通过localStorage保存一个由多个JS对象组成的数组。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/。将鼠标悬停在点上以更新阵列。然后点击保存，然后点击加载按钮。

来源

2017-09-13 Revo

你试过JSON.parse（localStorage.getItem（'features'））吗？也看看： https://stackoverflow.com/questions/11616630/json-stringify-avoid-typeerror-converting-circular-structure-to-json – user1338871

JSON解析/字符串化...localStorage只能存储字符串 –

featureArrays的类型是什么？ – Steven

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

来源

2017-09-13 07:11:56 Kaiido

我在我的小提琴中试过这个，返回'undefined' – Revo

@Revo你能分享一个链接到这个jsfiddle吗？ – Kaiido

https://jsfiddle.net/ytc26fju/3/但我可以修复它，我的功能有一个圆形结构，我必须先摆脱它。 – Revo

您确实需要将它转换为JSON才能将其存储（使用JSON.stringify），并在出口时解析它，因为localStorage存储字符串而不是对象。

错误TypeError: Converting circular structure to JSON意味着你的数据结构有其内在的循环，有一个对象a有对象b作为一个属性，然后有对象a作为一个属性......循环往复。显然你不能“写出来”，因为它是一个无限循环。通过你想要保存的对象，你可能会发现它出错的地方 - 你似乎很乐意把东西推到你的featureArray。

来源

2017-09-13 06:55:15 jlaitio

找到它。它在某处隐藏在feature.geometry – Revo

将项目设置在本地存储中。

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

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

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

来源

2017-09-13 06:56:28

正如我写的，返回错误TypeError：将圆形结构转换为JSON。 – Revo

明白了。不完全理解为什么，但一个特征对象帽子是一个圆形结构。我不得不这样做：

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

来源

2017-09-13 08:11:16 Revo

LocalStorage保存并加载JS对象

回答

相关问题