sessionStorage咐汞、localStorage存儲(chǔ)數(shù)組與對(duì)象

(sessionStorage盖呼、localStorage?存儲(chǔ)對(duì)象、或者數(shù)組時(shí)是需要先轉(zhuǎn)換成為字符串化撕,再讀取時(shí)再把他轉(zhuǎn)換為對(duì)象或者數(shù)組)

先介紹一下localStorage

localStorage對(duì)象是HTML5的客戶端存儲(chǔ)持久化數(shù)據(jù)的方案几晤。為了能訪問(wèn)到同一個(gè)localStorage對(duì)象,頁(yè)面必須來(lái)自同一個(gè)域名(子域名無(wú)效)植阴,使用同一種協(xié)議蟹瘾,在同一個(gè)端口上。

過(guò)期策略:localstorage永久存儲(chǔ)掠手,不過(guò)期憾朴,除非手動(dòng)刪除,sessionstorage在重啟瀏覽器喷鸽、關(guān)閉頁(yè)面或新開頁(yè)面時(shí)失效众雷。

localStorage是Storage類型的實(shí)例。有以下的幾種方法:

①clear():刪除所有值做祝。

②getItem(name):根據(jù)指定的名字name獲取對(duì)應(yīng)的值

③key(index):在指定的數(shù)字位置獲取該位置的名字砾省。

④removeItem(name):刪除由name指定的名值對(duì)

⑤setItem(name,value):為指定名字設(shè)置一個(gè)對(duì)應(yīng)的值


localStorage對(duì)象可以通過(guò)點(diǎn)號(hào)調(diào)用這些方法。

例:使用方法來(lái)存儲(chǔ)數(shù)據(jù)

localStorage.setItem("name","songyuhua");//這樣就用localStorage存儲(chǔ)了一個(gè)名字為name的數(shù)據(jù)混槐,數(shù)據(jù)的內(nèi)容為 “songyuhua"


使用方法來(lái)讀取數(shù)據(jù)

localStorage.getItem("name");//這樣就讀取了名字為“name”的數(shù)據(jù)的值编兄。


有時(shí)候,我們需要將數(shù)據(jù)存儲(chǔ)到sessionStorage和localStorage中声登,這樣做的好處有:

1 緩存數(shù)據(jù)

2 減少對(duì)內(nèi)存的占用


但是狠鸳,storage只能存儲(chǔ)字符串的數(shù)據(jù),對(duì)于JS中常用的數(shù)組或?qū)ο髤s不能直接存儲(chǔ)悯嗓。

var obj = { name:'Jim' };

sessionStorage.obj = obj;

localStorage.obj = obj;


var arr = [1,2,3];

sessionStorage.obj = arr;

localStorage.obj = arr;


上面的寫法都是不能成功的件舵!但我們可以通過(guò)JSON對(duì)象提供的parse和stringify將其他數(shù)據(jù)類型轉(zhuǎn)化成字符串,再存儲(chǔ)到storage中就可以了脯厨。請(qǐng)看下面的代碼芦圾。


var obj = { name:'Jim' };

var str = JSON.stringify(obj);


//存入

sessionStorage.obj = str;

//讀取

str = sessionStorage.obj;

//重新轉(zhuǎn)換為對(duì)象

obj = JSON.parse(str);


localStorage也一樣,只是和sessionStorage的存儲(chǔ)時(shí)間不一樣俄认。

需要注意的是个少,JS中的數(shù)組本質(zhì)上也是對(duì)象類型洪乍,所以上面的代碼對(duì)數(shù)組也是適用的。


var arra=[1,2,3,4];

localStorage.setItem('key',JSON.stringify(arra));

var read=JSON.parse(localStorage.getItem('key'));

console.log(read,read.length);

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末夜焦,一起剝皮案震驚了整個(gè)濱河市壳澳,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌茫经,老刑警劉巖巷波,帶你破解...
    沈念sama閱讀 222,590評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異卸伞,居然都是意外死亡抹镊,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,157評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門荤傲,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)垮耳,“玉大人,你說(shuō)我怎么就攤上這事遂黍≈辗穑” “怎么了?”我有些...
    開封第一講書人閱讀 169,301評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵雾家,是天一觀的道長(zhǎng)铃彰。 經(jīng)常有香客問(wèn)我,道長(zhǎng)芯咧,這世上最難降的妖魔是什么牙捉? 我笑而不...
    開封第一講書人閱讀 60,078評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮敬飒,結(jié)果婚禮上邪铲,老公的妹妹穿的比我還像新娘。我一直安慰自己驶拱,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,082評(píng)論 6 398
  • 文/花漫 我一把揭開白布晶衷。 她就那樣靜靜地躺著蓝纲,像睡著了一般。 火紅的嫁衣襯著肌膚如雪晌纫。 梳的紋絲不亂的頭發(fā)上税迷,一...
    開封第一講書人閱讀 52,682評(píng)論 1 312
  • 那天,我揣著相機(jī)與錄音锹漱,去河邊找鬼箭养。 笑死,一個(gè)胖子當(dāng)著我的面吹牛哥牍,可吹牛的內(nèi)容都是我干的毕泌。 我是一名探鬼主播喝检,決...
    沈念sama閱讀 41,155評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼撼泛!你這毒婦竟也來(lái)了挠说?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,098評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤愿题,失蹤者是張志新(化名)和其女友劉穎损俭,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體潘酗,經(jīng)...
    沈念sama閱讀 46,638評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡杆兵,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,701評(píng)論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了仔夺。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片琐脏。...
    茶點(diǎn)故事閱讀 40,852評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖囚灼,靈堂內(nèi)的尸體忽然破棺而出骆膝,到底是詐尸還是另有隱情,我是刑警寧澤灶体,帶...
    沈念sama閱讀 36,520評(píng)論 5 351
  • 正文 年R本政府宣布阅签,位于F島的核電站,受9級(jí)特大地震影響蝎抽,放射性物質(zhì)發(fā)生泄漏政钟。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,181評(píng)論 3 335
  • 文/蒙蒙 一樟结、第九天 我趴在偏房一處隱蔽的房頂上張望养交。 院中可真熱鬧,春花似錦瓢宦、人聲如沸碎连。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,674評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)鱼辙。三九已至,卻和暖如春玫镐,著一層夾襖步出監(jiān)牢的瞬間倒戏,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,788評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工恐似, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留杜跷,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,279評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像葛闷,于是被迫代替她去往敵國(guó)和親憋槐。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,851評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容