為了破解Cookie的一系列限制（主要是cookie的大小和多少都受限制，并且每次你請(qǐng)求一個(gè)新的頁(yè)面的時(shí)候Cookie都會(huì)被發(fā)送過去，這樣無形中浪費(fèi)了帶寬，另外cookie還需要指定作用域，不可以跨域調(diào)用），HTML5通過JS的新的API就能直接存儲(chǔ)大量的數(shù)據(jù)到客戶端瀏覽器，而且支持復(fù)雜的本地數(shù)據(jù)庫(kù)，讓JS更有效率。HTML5支持兩種的WebStorage：永久性的本地存儲(chǔ)（localStorage），會(huì)話級(jí)別的本地存儲(chǔ)（sessionStorage）。下面就讓我們來了解一下HTML5如何使用Web Storage儲(chǔ)存，介紹Web Storage儲(chǔ)存的2種方式，希望對(duì)大家有所幫助！

一：localStorage（永久性的本地存儲(chǔ)）

一直存儲(chǔ)在本地，數(shù)據(jù)存儲(chǔ)是永久的，除非用戶或程序?qū)ζ溥M(jìn)行刪除操作；localStorage 對(duì)象存儲(chǔ)的數(shù)據(jù)沒有時(shí)間限制。第二天、第二周或下一年之后，數(shù)據(jù)依然可用。

特點(diǎn)：
① 域內(nèi)安全、永久保存。即客戶端或?yàn)g覽器中來自同一域名的所有頁(yè)面都可訪問localStorage數(shù)據(jù)且數(shù)據(jù)除了刪除否則永久保存，但客戶端或?yàn)g覽器之間的數(shù)據(jù)相互獨(dú)立。
② 數(shù)據(jù)不會(huì)隨著Http請(qǐng)求發(fā)送到后臺(tái)服務(wù)器；
③ 存儲(chǔ)數(shù)據(jù)的大小機(jī)會(huì)不用考慮，因?yàn)樵贖TML5的標(biāo)準(zhǔn)中要求瀏覽器至少要支持到4MB。

 !DOCTYPE html  html  head  meta charset= UTF-8  title localStorage /title  /head  body  script type= text/javascript  //添加key-value 數(shù)據(jù)到 localStorage localStorage.setItem( localStorage , http://127.0.0.1:8020  //通過key來獲取value var dt = localStorage.getItem( localStorage  alert(dt); //清空所有的key-value數(shù)據(jù)。 //localStorage.clear(); alert(localStorage.length); /script  /body  /html 

效果圖：

localStorage提供了四個(gè)方法來輔助我們進(jìn)行對(duì)本地存儲(chǔ)做相關(guān)操作。
（1）setItem(key,value)：添加本地存儲(chǔ)數(shù)據(jù)。兩個(gè)參數(shù)，非常簡(jiǎn)單就不說了。
（2）getItem(key):通過key獲取相應(yīng)的Value。
（3）removeItem(key):通過key刪除本地?cái)?shù)據(jù)。
（4）clear():清空數(shù)據(jù)。

二.sessionStorage（會(huì)話級(jí)別的本地存儲(chǔ)）

在會(huì)話期內(nèi)有效，數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除；

特點(diǎn)：會(huì)話控制、短期保存。會(huì)話概念與服務(wù)器端的session概念相似，短期保存指窗口或?yàn)g覽器或客戶端關(guān)閉后自動(dòng)消除數(shù)據(jù)。

 !DOCTYPE html  html  head  meta charset= UTF-8  title sessionStorage /title  /head  body  script type= text/javascript  //添加key-value 數(shù)據(jù)到 sessionStorage sessionStorage.setItem( sessionStorage , http://127.0.0.1:8020  //通過key來獲取value var dt = sessionStorage.getItem( sessionStorage  alert(dt); //清空所有的key-value數(shù)據(jù)。 //sessionStorage.clear(); alert(sessionStorage.length); /script  /body  /html 

效果圖：

sessionStorage提供了四個(gè)方法來輔助我們進(jìn)行對(duì)本地存儲(chǔ)做相關(guān)操作。
（1）setItem(key,value)：添加本地存儲(chǔ)數(shù)據(jù)。兩個(gè)參數(shù)，非常簡(jiǎn)單就不說了。
（2）getItem(key):通過key獲取相應(yīng)的Value。
（3）removeItem(key):通過key刪除本地?cái)?shù)據(jù)。
（4）clear():清空數(shù)據(jù)。

以上就是HTML5如何使用Web Storage儲(chǔ)存？Web Storage儲(chǔ)存的2種方式（示例）的詳細(xì)內(nèi)容，其它編程語言

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。