使用sessionStorage、localStorage存儲數組與對象


先介紹一下localStorage

localStorage對象是HTML5的客戶端存儲持久化數據的方案。為了能訪問到同一個localStorage對象,頁面必須來自同一個域名(子域名無效),使用同一種協議,在同一個端口上。

過期策略:localstorage永久存儲,不過期,除非手動刪除,sessionstorage在重啟瀏覽器、關閉頁面或新開頁面時失效。

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

①clear():刪除所有值。

②getItem(name):根據指定的名字name獲取對應的值

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

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

⑤setItem(name,value):為指定名字設置一個對應的值

 

localStorage對象可以通過點號調用這些方法。

例:使用方法來存儲數據

localStorage.setItem("name","songyuhua");//這樣就用localStorage存儲了一個名字為name的數據,數據的內容為 “songyuhua"

 

使用方法來讀取數據

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

 

有時候,我們需要將數據存儲到sessionStorage和localStorage中,這樣做的好處有:

1 緩存數據

2 減少對內存的占用

 

但是,storage只能存儲字符串的數據,對於JS中常用的數組或對象卻不能直接存儲。

var obj = { name:'Jim' };

sessionStorage.obj = obj;

localStorage.obj = obj;

 

var arr = [1,2,3];

sessionStorage.obj = arr;

localStorage.obj = arr;

 

上面的寫法都是不能成功的!但我們可以通過JSON對象提供的parse和stringify將其他數據類型轉化成字符串,再存儲到storage中就可以了。請看下面的代碼。

 

var obj = { name:'Jim' };

var str = JSON.stringify(obj);

 

//存入

sessionStorage.obj = str;

//讀取

str = sessionStorage.obj;

//重新轉換為對象

obj = JSON.parse(str);

 

localStorage也一樣,只是和sessionStorage的存儲時間不一樣。

需要注意的是,JS中的數組本質上也是對象類型,所以上面的代碼對數組也是適用的。

 

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

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

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

console.log(read,read.length);

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM