H5提供了兩種在客戶端存儲數(shù)據(jù)的方式:
localStorage 持久化的本地存儲(瀏覽器關(guān)閉重新打開數(shù)據(jù)依然存在)
sessionStorage 針對一個session的本地存儲
之前這些都是由cookie來完成的,cookie的特點(diǎn)是存儲量小,在服務(wù)器和客戶端之間來回
傳遞,傳輸效率不高。一般可以在判斷注冊的用戶是否登錄該本網(wǎng)站。
webStorage API 繼承于Window對象,并提供了兩個新的屬性
-Window.localStorage 和 Window.sessionStorage.
webStorage的優(yōu)勢:
webStorage的局限性:
使用webStorage
1.存儲數(shù)據(jù):
localStorage.name = ’value’;
localStorage[’name’] = ’value’;
localStorage.setItem(’name’,’value’);
注意鍵和值總是字符串。建議使用webStorage API
(setItem,getItem,removeItem,key,length)
2.獲取數(shù)據(jù):
var value = localStorage.getItem(’name’);
var value = localStorage.name;
var value = localStorage[’name’];
3.刪除數(shù)據(jù):
清空所有數(shù)據(jù)
localStorage.clear();
刪除特定數(shù)據(jù);
localStorage.removeItem(’name’);
4.檢測瀏覽器是否支持:
function storageAvailable(type) {
try {
var storage = window[type],
x = ’__storage_test__’;
storage.setItem(x, x);
storage.removeItem(x);
return true;
}
catch(e) {
return false;
}
}
if (storageAvailable(’localStorage’)) {
// Yippee! We can use localStorage awesomeness
}
else {
// Too bad, no localStorage for us
}
5.就是存儲對象了,我們需要進(jìn)行轉(zhuǎn)換為字符串存入,等到使用的時候取出再轉(zhuǎn)為對象。
var str = JSON.stringify(obj);
localStorage.mydata = str;
var obj = JSON.parse(localStorage.mydata);
到這里就結(jié)束了,算是對webStorage基本使用的一些小總結(jié),希望可以對你有所幫助。
【 微信掃一掃 】