小編給大家分享一下JS中l(wèi)ocalStorage存儲對象和sessionStorage存儲數(shù)組對象的示例分析，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

網(wǎng)站建設哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁設計、網(wǎng)站建設、微信開發(fā)、重慶小程序開發(fā)、集團企業(yè)網(wǎng)站建設等服務項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了紫金免費建站歡迎大家使用！

一、前言

最近在用angular做商城購物車的功能模塊，因為angular的watch監(jiān)聽，數(shù)據(jù)只要發(fā)生變化就能很方便的自動渲染頁面。但隨即出現(xiàn)的問題是，之前用戶操作的樣式都會被重置掉。

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

想著將所有選中商品的獨有Id存入數(shù)組，利用localStorage存儲，每次刷新都取到存儲的數(shù)組，將數(shù)組對應Id的商品再次勾上。結果出現(xiàn)了下面的問題：

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

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

二、存儲數(shù)組

json.stringify可以將對象轉換為 JSON 字符串

JSON.parse可以將 JSON 字符串轉換為對象

那我們存的時候先將數(shù)組轉成JSON字符串，取出來再轉成數(shù)組就可以了，實現(xiàn)如下。

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中l(wèi)ocalStorage存儲對象和sessionStorage存儲數(shù)組對象的示例分析”有了一定的了解，如果想了解更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

網(wǎng)站名稱：JS中l(wèi)ocalStorage存儲對象和sessionStorage存儲數(shù)組對象的示例分析
轉載源于：http://biofuelwatch.net/article/pioecj.html