H5 localStorage 和 sessionStorage

h5提供客戶端存儲(chǔ)數(shù)據(jù)的新方法:

localStorage  -- 沒(méi)有時(shí)間限制的數(shù)據(jù)存儲(chǔ) (持久化)
sessionStorage -- 針對(duì)一個(gè)session的數(shù)據(jù)存儲(chǔ)(會(huì)話級(jí)別)

1、web storage 和 cookie 的區(qū)別

Web Storage的概念和cookie相似,區(qū)別是它是為了更大容量存儲(chǔ)設(shè)計(jì)的。Cookie的大小是受限的,并且每次你請(qǐng)求一個(gè)新的頁(yè)面的時(shí)候Cookie都會(huì)被發(fā)送過(guò)去,這樣無(wú)形中浪費(fèi)了帶寬,另外cookie還需要指定作用域,不可以跨域調(diào)用。
除此之外,Web Storage擁有setItem,getItem,removeItem,clear等方法,不像cookie需要前端開(kāi)發(fā)者自己封裝setCookie,getCookie。
但是Cookie也是不可以或缺的:Cookie的作用是與服務(wù)器進(jìn)行交互,作為HTTP規(guī)范的一部分而存在 ,而Web Storage僅僅是為了在本地“存儲(chǔ)”數(shù)據(jù)而生。

2、localStorage和sessionStorage操作

setItem、getItem 和 removeItem

setItem 存儲(chǔ)value     sessionStorage.setItem("key", "value");
getItem 獲取value    var value = sessionStorage.getItem("key");
removeItem 刪除key    sessionStorage.removeItem("key");
clear 清除所有的key/value   sessionStorage.clear();

3、瀏覽器兼容

//數(shù)據(jù)存儲(chǔ)  IE6~7 cookie 其他瀏覽器HTML5本地存儲(chǔ)
var arr = [0, 1, 1, 1];
if (window.localStorage) {
localStorage.setItem("menu", arr);
} else {
Cookie.write("menu", arr);
}

//數(shù)據(jù)讀取
var strStoreDate = window.localStorage? localStorage.getItem("menu"): Cookie.read("menu");

雖然我們存儲(chǔ)的是數(shù)組,但是,實(shí)際上存儲(chǔ)的的是數(shù)組字符化后的字符串。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容