javascript - 使用动态内容附加 localStorage

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"