Question

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

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

以上将值存储在coords变量中。我将其设置为localStorage：

localStorage.setItem('coords', JSON.stringify(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));

我面临的问题是当我试图从其他函数中获取坐标项时。

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}] 那么JSON.stringify(coords)将返回"[{"x":10,"y":12},{"x":12,"y":13}]"

方法问题

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

///将原始坐标项目保存在变量中

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

附加带有动态内容的localStorage

2 个答案: