快捷導(dǎo)航

JS localStorage存儲(chǔ)對(duì)象，sessionStorage存儲(chǔ)數(shù)組對(duì)象操作示例

更新時(shí)間：2020年02月15日 12:27:00 作者：聽(tīng)風(fēng)是風(fēng)

這篇文章主要介紹了JS localStorage存儲(chǔ)對(duì)象，sessionStorage存儲(chǔ)數(shù)組對(duì)象操作,結(jié)合實(shí)例形式詳細(xì)分析了JS使用localStorage存儲(chǔ)對(duì)象以及sessionStorage存儲(chǔ)數(shù)組對(duì)象相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下

本文實(shí)例講述了JS localStorage存儲(chǔ)對(duì)象，sessionStorage存儲(chǔ)數(shù)組對(duì)象操作。分享給大家供大家參考，具體如下：

一、前言

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

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

想著將所有選中商品的獨(dú)有Id存入數(shù)組，利用localStorage存儲(chǔ)，每次刷新都取到存儲(chǔ)的數(shù)組，將數(shù)組對(duì)應(yīng)Id的商品再次勾上。結(jié)果出現(xiàn)了下面的問(wè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)為了字符串類(lèi)型，這明顯不是我想要的，查了下，可以利用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字符串，取出來(lái)再轉(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)行效果。

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

您可能感興趣的文章: