本文實例講述了JS 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的方法還能用于深拷貝

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.Vevb.com/code/HtmlJsRun測試上述代碼運行效果。

更多關于JavaScript相關內容可查看本站專題：《JavaScript操作DOM技巧總結》、《JavaScript頁面元素操作技巧總結》、《JavaScript事件相關操作與技巧大全》、《JavaScript查找算法技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript錯誤與調試技巧總結》

希望本文所述對大家JavaScript程序設計有所幫助。