HTML5 localStorage使用方法及注意點
阿新 • • 發佈:2019-01-29
html5新增了在客戶端儲存資料的新方法:
1.localStorage - 沒有時間限制的資料儲存;
2.sessionStorage - 針對一個session的資料儲存,當用戶關閉瀏覽器視窗後,資料會被刪除。
瀏覽器支援程度
注意到,IE8以及以上版本是支援localStorage和sessionStorage的,但是需要注意的是,IE8-IE10中是需要伺服器或者localhost才能使用。
使用方法
localStorage和sessionStorage的使用方法是一致的,區別在於:
localStorage方法儲存的資料沒有時間限制。第二天、第二週或下一年之後,資料依然可用。
sessionStorage 方法針對一個 session 進行資料儲存。當用戶關閉瀏覽器視窗後,資料會被刪除。
建立localStorage
localStorage.setItem('user','輪迴韓');
或
localStorage.user='輪迴韓';
訪問localStorage
localStorage.getItem('user','輪迴韓'); //與localStorage.setItem對應
或
localStorage.user; //與設定時localStorage.user='輪迴韓'對應
儲存陣列和物件
localStorage都是以字串形式來儲存資料的,即使你儲存的是陣列和物件,localStorage也會將陣列和物件以字串的形式儲存。
儲存物件
var obj={
name:'輪迴韓',
age:'100',
sex:'女'
};
console.log(obj); //輸出 Object {name: "輪迴韓", age: "100", sex: "女"}
console.log(typeof obj); //輸出 object
window.localStorage.setItem('people',obj);
console.log(window.localStorage.getItem('people' )); //輸出 [object Object]
console.log(typeof window.localStorage.getItem('people')); //輸出 string
儲存陣列
var arr=[2,3,5];
console.log(arr); //輸出 [2, 3, 5]
console.log(typeof arr); //輸出 object
window.localStorage.setItem('num',arr);
console.log(window.localStorage.getItem('num')); //輸出 2,3,5
console.log(typeof window.localStorage.getItem('num')); //輸出 string
解決辦法
其實大多時候我們想要儲存的就是陣列和物件,這時候該怎麼辦呢?
解決辦法就是儲存的時候用JSON.stringify轉換後再儲存,獲取的時候用JSON.parse()轉換後再獲取。
var obj={
name:'輪迴韓',
age:'100',
sex:'女'
};
console.log(obj); //Object {name: "輪迴韓", age: "100", sex: "女"}
console.log(typeof obj); //object
window.localStorage.setItem('people',JSON.stringify(obj));
console.log(JSON.parse(window.localStorage.getItem('people'))); //Object {name: "輪迴韓", age: "100", sex: "女"}
console.log(typeof JSON.parse(window.localStorage.getItem('people'))); //object