Javascript 使用 stringify 设置和获取对象到本地存储？

Setting and getting object to local storage using stringify?

提问by Sami

Creating an object called car:

创建一个名为 car 的对象：

function car(temp){

    this.brand=temp[0];
    this.color=temp[1];
    this.year=temp[2];
}

var temp = ['Skoda', 'Red', '2012'];
car = new car(temp);

1. Setting object and stringify after reading from localStorage:

   localStorage.setItem('car',car);
   car = localStorage.getItem('car');
   car = JSON.stringify(car);
   

   car after stringify-----------------> [object Object] at file:///android_asset/www/...

2. Stringify object and Setting object to localStorage after it: localStorage.setItem('car',JSON.stringify(car)); car = localStorage.getItem('car');

1. 从 localStorage 读取后设置对象和字符串化：

   localStorage.setItem('car',car);
   car = localStorage.getItem('car');
   car = JSON.stringify(car);
   

   字符串化之后的汽车-----------------> [object Object] at file:///android_asset/www/...

2. 字符串化对象并将对象设置为 localStorage 之后： localStorage.setItem('car',JSON.stringify(car)); car = localStorage.getItem('car');

car after stringify-----------------> "{\"brand\":\"Skoda\",\"color\":\"Red\",\"year\":\"2012\"}" at file:///android_asset/www/...

字符串化后的汽车-----------------> "{\"brand\":\"Skoda\",\"color\":\"Red\",\"year \":\"2012\"}" at file:///android_asset/www/...

Question 1: Why does it make difference what is the order when you stringify the object?

问题 1：为什么字符串化对象时的顺序会有所不同？

Question 2: Why can't I use stringified object like that:

问题 2：为什么我不能像这样使用字符串化对象：

08-21 11:49:14.860: I/Web Console(9642): car after stringify----------------->     {"brand":"Skoda","color":"Red","year":"2012"}

console.log("car.brand----->" +car.brand); car.name----->undefined

console.log("car.brand----->" +car.brand); car.name---->未定义

回答by LmC

From my understanding you can't use your stringified object once it's been stringified because it's no longer an object. It's a String.

根据我的理解，一旦它被字符串化，你就不能使用你的字符串化对象，因为它不再是一个对象。它是一个字符串。

So when you try to do car.brandon the string there is no property brand.

因此，当您尝试对car.brand字符串执行操作时，没有属性brand。

Personally, good practice in my opinion would be to do.

就我个人而言，我认为最好的做法是这样做。

 function car(temp){
     this.brand=temp[0];
     this.color=temp[1];
     this.year=temp[2];
 }

 var temp = ['Skoda', 'Red', '2012'];
 car = new car(temp);

 localStorage.setItem('car',JSON.stringify(car)); 
 car = localStorage.getItem('car');
 car = JSON.parse(car);

This means the car object is now not a string but an object.

这意味着汽车对象现在不是字符串而是一个对象。

When doing this also write to local storage using stringify and read using parse.

这样做时，还使用 ​​stringify 写入本地存储并使用 parse 读取。

回答by fredrik

You can't store JavaScript object is localStorage, see this question.

您不能存储 JavaScript 对象是 localStorage，请参阅此问题。

So use your second option. First stringify the object the store it. And later pick it up and parse it to a javascript object.

所以使用你的第二个选项。首先将对象字符串化并存储它。后来拿起它并将其解析为一个 javascript 对象。

localStorage.setItem('car',JSON.stringify(car));
carString = localStorage.getItem('car');
car = JSON.parse(carString);
console.log(car.brand); // Skoda

回答by Andres Gallo

I was facing this same issue recently. Check out this script I wrote.
https://github.com/andresgallo/truStorage

我最近面临同样的问题。看看我写的这个脚本。
https://github.com/andresgallo/truStorage

It allows storage and retrieval of objects inside local storage. It will return objects as objects automatically if need be. The other thing is you also set and get items in a nested object. Best part of it all is that its a tiny script.

它允许在本地存储中存储和检索对象。如果需要，它会自动将对象作为对象返回。另一件事是您还在嵌套对象中设置和获取项目。最好的部分是它的一个小脚本。

回答by Jamie Hutber

The latest browsers now support localStorageas objects natively. I have tested this with Chrome v44 and Firefox v34:

最新的浏览器现在原生支持localStorage作为对象。我已经使用 Chrome v44 和 Firefox v34 对此进行了测试：

localStorage
Storage {debug: "undefined", uid: "3", length: 2} 

typeof localStorage
"object"

So from now on. You'll be alright.

所以从现在开始。你会没事的。