LocalStorage存储JSON对象、存储数组

1、存储普通数组:举例:(也可用下面第三条的方法)

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

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

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

2、存储JSON对象:

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

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

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

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

举例:

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

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

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

3、存储JSON对象数组:(方法与存储json对象相似),举例:

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