【JS】LocalStorage存储JSON对象、存储数组

1、存储普通数组：举例：（也可用下面第三条的方法）

var arr = [1, 2, 3];
localStorage.setItem("temp", arr);
console.log(typeof localStorage.getItem("temp"));//string
console.log(localStorage.getItem("temp"));//返回字符串'1,2,3'

上面例子中 localStorage.setItem() 将数组自动转成了字符串形式；但它不会将JSON对象转成字符串。举例：

var obj = {"a": 1, "b": 2};
localStorage.setItem("temp2", obj);
console.log(typeof localStorage.getItem("temp2"));//也会返回String
console.log(localStorage.getItem("temp2"));//但是返回[object Object]

 

2、存储JSON对象：

正确存储JSON对象的方法是：

存储前先用JSON.stringify()方法将json对象转换成json字符串形式；

【JSON.stringify() 方法可以将任意的 JavaScript 值序列化成 JSON 字符串。】

后续要用对象时，用JSON.parse()方法将之前存储的hson字符串转成json对象。

举例：

var obj3 = {"a": 1, "b": 2};
localStorage.setItem("temp3", JSON.stringify(obj3));
console.log(typeof JSON.parse(localStorage.getItem("temp3")));//返回object
console.log(JSON.parse(localStorage.getItem("temp3")));//返回{a: 1, b: 2}

避免因为存储的键名不存在返回对象为null的情况，建议这样读取json对象：

console.log(JSON.parse(localStorage.getItem("temp4")||'{}'));//返回对象

3、存储JSON对象数组：（方法与存储json对象相似），举例：

var obj3 = [{"a": 1, "b": 2}, {"c": 3, "d": 4}];
localStorage.setItem("temp3", JSON.stringify(obj3));
console.log(JSON.parse(localStorage.getItem("temp3")||'[]'));//返回对象数组