javascript - 附加带有动态内容的localStorage

我正在将图像保存到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');

这完美地工作了……但是原始代码却给出了错误。

最佳答案

尝试这个

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"

关于javascript - 附加带有动态内容的localStorage，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51578033/