(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);