JS中localStorage存儲對象和sessionStorage存儲數組對象的示例分析

小編給大家分享一下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的方法還能用于深拷貝

看完了這篇文章，相信你對“JS中localStorage存儲對象和sessionStorage存儲數組對象的示例分析”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！