用动态内容附加localStorage

Question

我正在保存到localStorage项的图像中的各个位置生成图像坐标。例如：

var coords = [];
coords.push(Math.round(dragStopLocation.x),Math.round(dragStopLocation.y));

上面将值存储在coords变量中。我使用将其设置为本地存储

localStorage.setItem('coords', JSON.stringify(coords));

这作为一个独立的代码运行良好。

由于项目coords是动态的，并且coords的许多数组是可能的，所以我想用新的数组附加项目coords。我正在使用以下代码：

//将原始coords项目保存在可变中

var old_coords = localStorage.getItem('coords');

//附加

if (old_coords === null) {
localStorage.setItem('coords', JSON.stringify(coords));
} else {
localStorage.setItem('coords', old_coords + JSON.stringify(coords));  
}

我尝试了另一种变体，在old_coords和coords 之间添加了一个逗号

localStorage.setItem('coords', old_coords + ',' + JSON.stringify(coords)); 

我面临的问题是，当我试图从不同的函数中获取coords的项目时。

function getArray() {
items = JSON.parse(localStorage.getItem('coords'));  
var size = 9;
var newarr = [];
for (var i = 0; i < items.length; i+=size) {
newarr.push(items.slice(i, i+size));  
}
return newarr;
}

这是我面临的以下错误：

Uncaught SyntaxError: Unexpected token [ in JSON at position 4

当我使用逗号时，我会得到相同的错误，但不是'[，而是,。

我试着用一个简单的例子来复制它：

localStorage.removeItem('items');
function appendToStorage(name, data){
var old = localStorage.getItem(name);
if(old === null || old === undefined) {
localStorage.setItem(name,data);
} else {
localStorage.setItem(name, old +"," + data);
}
}
items1 = ['image1','place','name',10,20,30,40,50,60];
appendToStorage('items', items1);
localStorage.getItem('items');
items2 = ['image2','place','name',11,21,31,41,51,61]
appendToStorage('items', items2);
localStorage.getItem('items');

这非常有效。。。然而，原始代码会出现错误。

Answer 1

试试这个

var old_coords = localStorage.getItem('coords');
var coords = [{x: 32, y: 24}, {x: 21, y: 43}];
if (old_coords === null) {
localStorage.setItem('coords', JSON.stringify(coords));
} else {
old_coords = JSON.parse(old_coords);
var new_coords = old_coords;
coords.forEach(function(item){
new_coords.push(item);             
}) 
localStorage.setItem('coords', new_coords);  
}

---

注意

假设你的coords和var coords = [{x: 10, y: 12}, {x: 12, y: 13}]一样则CCD_ 8将返回CCD_

您的方法存在问题

var coords = [{x: 10, y: 12}, {x: 12, y: 13}]
localStorage.setItem('coords', JSON.stringify(coords));
var old_coords = JSON.stringify(coords); // "[{"x":10,"y":12},{"x":12,"y":13}]"
coords = [{x: 32, y: 43}, {x: 44, y: 21}];
var new_coords = old_coords + JSON.stringify(coords); // "[{"x":10,"y":12},{"x":12,"y":13}][{"x":32,"y":43},{"x":44,"y":21}]"
localStorage.setItem('coords', new_coords); 

现在，当你执行localStorage.getItem('coords');时，你会得到"[{"x":10,"y":12},{"x":12,"y":13}][{"x":32,"y":43},{"x":44,"y":21}]"，这显然不是一个有效的JSON，因此当你尝试执行JSON.parse((时(你在getArray方法中执行(，它会抛出一个错误

Uncaught SyntaxError: Unexpected token [ in JSON at .....

在您的第二个示例中，它之所以有效，是因为

localStorage.removeItem('items');
function appendToStorage(name, data){
var old = localStorage.getItem(name);
if(old === null || old === undefined) {
localStorage.setItem(name,data);
} else {
localStorage.setItem(name, old +"," + data);
}
}
items1 = ['image1','place','name',10,20,30,40,50,60];
appendToStorage('items', items1);
localStorage.getItem('items'); 
// "image1,place,name,10,20,30,40,50,60", as you can see the difference its not stored as previous as - ["image1,place,name,10,20,30,40,50,60"], it stored without `[` and `]` brackets. 
items2 = ['image2','place','name',11,21,31,41,51,61]
appendToStorage('items', items2);
localStorage.getItem('items');
//"image1,place,name,10,20,30,40,50,60,image2,place,name,11,21,31,41,51,61", which is a **valid JSON**, 

差异

var items2 = ['image2','place','name',11,21,31,41,51,61]
localStorage.setItem('items', items2);
localStorage.getItem('items'); // "image2,place,name,11,21,31,41,51,61"

var items2 = ['image2','place','name',11,21,31,41,51,61]
localStorage.setItem('items', JSON.stringify(items2));
localStorage.getItem('items'); // "["image2","place","name",11,21,31,41,51,61]"

正如你所看到的，如果你将其字符串化并存储，它将被存储为----"["image2","place","name",11,21,31,41,51,61]"，如果你直接存储它，它将存储为----"image2,place,name,11,21,31,41,51,61"

Answer 2

问题似乎是从localStorage检索保存的坐标并向其添加新的坐标。我已经编辑了您的代码，请告诉我它是否适用于您！

var coords = [];
coords.push(Math.round(dragStopLocation.x),Math.round(dragStopLocation.y));
localStorage.setItem('coords', JSON.stringify(coords));

//将原始coords项目保存在可变中

var old_coords = JSON.parse(localStorage.getItem('coords')); //Converting to a valid object

//附加

if (old_coords === null) {
localStorage.setItem('coords', JSON.stringify(coords));
} else {
//localStorage.setItem('coords', old_coords + JSON.stringify(coords));
var new_coords = old_coords.push(coords);//retreived object is array so we need to push the new values rather than appending it
localStorage.setItem('coords', JSON.stringify(new_coords));
}