JS中l(wèi)ocalStorage存儲(chǔ)對(duì)象和sessionStorage存儲(chǔ)數(shù)組對(duì)象的示例分析

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

一、前言

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

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

想著將所有選中商品的獨(dú)有Id存入數(shù)組，利用localStorage存儲(chǔ)，每次刷新都取到存儲(chǔ)的數(shù)組，將數(shù)組對(duì)應(yīng)Id的商品再次勾上。結(jié)果出現(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ù)組存進(jìn)去直接被強(qiáng)轉(zhuǎn)為了字符串類型，這明顯不是我想要的，查了下，可以利用json.stringify與JSON.parse的轉(zhuǎn)換達(dá)到目的。

二、存儲(chǔ)數(shù)組

json.stringify可以將對(duì)象轉(zhuǎn)換為 JSON 字符串

JSON.parse可以將 JSON 字符串轉(zhuǎn)換為對(duì)象

那我們存的時(shí)候先將數(shù)組轉(zhuǎn)成JSON字符串，取出來再轉(zhuǎn)成數(shù)組就可以了，實(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"

三、存儲(chǔ)對(duì)象

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轉(zhuǎn)換值達(dá)到存儲(chǔ)的的方式非常好用，除此之外JSON的方法還能用于深拷貝

看完了這篇文章，相信你對(duì)“JS中l(wèi)ocalStorage存儲(chǔ)對(duì)象和sessionStorage存儲(chǔ)數(shù)組對(duì)象的示例分析”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！