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

一、前言

最近在用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的轉換達到目的。

二、存儲數組

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"

三、存儲對象

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的方法還能用於深拷貝，有興趣可以看看博主這篇文章。

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

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