localStorage存儲對象，sessionStorage存儲數組對象

1、前言

最近在用angular作商城購物車的功能模塊，由於angular的watch監聽，數據只要發生變化就能很方便的自動渲染頁面。但隨即出現的問題是，以前用戶操做的樣式都會被重置掉。

例如我勾選了幾個商品準備結算，又修改了商品數量，這時候發起了請求，頁面數據被渲染，打鉤的商品全被恢復未選中。

想着將全部選中商品的獨有Id存入數組，利用localStorage存儲，每次刷新都取到存儲的數組，將數組對應Id的商品再次勾上。結果出現了下面的問題：

var a = [1,2,3];
window.localStorage.setItem('key',a);
var b = window.localStorage.getItem('key');
console.log(b,typeof b);//1,2,3   string

很明顯，數組存進去直接被強轉爲了字符串類型，這明顯不是我想要的，查了下，能夠利用json.stringify與JSON.parse的轉換達到目的。

2、存儲數組

json.stringify能夠將對象轉換爲 JSON 字符串

JSON.parse能夠將 JSON 字符串轉換爲對象

那咱們存的時候先將數組轉成JSON字符串，取出來再轉成數組就能夠了，實現以下。

function storageObj(obj) {
    var checkedIdStr = JSON.stringify(obj);
    sessionStorage.setItem("key", checkedIdStr);
};
var arrBefor = [1,2,3];
storageObj(arrBefor);
var arrAfter = JSON.parse(sessionStorage.getItem("key"));
console.log(arrAfter,typeof arrAfter);//[1, 2, 3]  "object"

3、存儲對象

function storageObj(obj) {
    var checkedIdStr = JSON.stringify(obj);
    sessionStorage.setItem("key", checkedIdStr);
};
var objBefor = {
    a:1,
    b:2
};
storageObj(objBefor);
var objAfter = JSON.parse(sessionStorage.getItem("key"));
console.log(objAfter,typeof objAfter);//{a: 1, b: 2} "object"

利用JSON轉換值達到存儲的的方式很是好用，除此以外JSON的方法還能用於深拷貝，有興趣能夠看看博主這篇文章。

深拷貝與淺拷貝的區別，實現深拷貝的幾種方法

大概記錄這麼多了，謝謝閱讀。