本文實(shí)例講述了JS localStorage存儲(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的方法還能用于深拷貝

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《JavaScript操作DOM技巧總結(jié)》、《JavaScript頁面元素操作技巧總結(jié)》、《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

最新評(píng)論