HTML5存儲(chǔ)的方法

這篇文章主要介紹“HTML5存儲(chǔ)的方法”，在日常操作中，相信很多人在HTML5存儲(chǔ)的方法問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”HTML5存儲(chǔ)的方法”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

　　使用HTML5可以在本地存儲(chǔ)用戶的瀏覽數(shù)據(jù)。

　　早些時(shí)候，本地存儲(chǔ)使用的是cookies。但是Web 存儲(chǔ)需要更加的安全與快速。 這些數(shù)據(jù)不會(huì)被保存在服務(wù)器上，但是這些數(shù)據(jù)只用于用戶請(qǐng)求網(wǎng)站數(shù)據(jù)上。它也可以存儲(chǔ)大量的數(shù)據(jù)，而不影響網(wǎng)站的性能。

　　數(shù)據(jù)以鍵/值對(duì)存在， web網(wǎng)頁(yè)的數(shù)據(jù)只允許該網(wǎng)頁(yè)訪問(wèn)使用。新建一個(gè)前端學(xué)習(xí)qun438905713，在群里大多數(shù)都是零基礎(chǔ)學(xué)習(xí)者，大家相互幫助，相互解答，并且還準(zhǔn)備很多學(xué)習(xí)資料，歡迎零基礎(chǔ)的小伙伴來(lái)一起交流。

　　Internet Explorer 8+, Firefox, Opera, Chrome, 和 Safari支持Web 存儲(chǔ)。

　　注意：?Internet Explorer 7 及更早IE版本不支持web 存儲(chǔ)。

　　客戶端存儲(chǔ)數(shù)據(jù)的兩個(gè)對(duì)象為：

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

　　在使用 web 存儲(chǔ)前，應(yīng)檢查瀏覽器是否支持 localStorage 和sessionStorage:

　　if（typeof（Storage）！=="undefined"）

　　{

　　 // 是的！ 支持 localStorage sessionStorage 對(duì)象！

　　// 一些代碼……

　　}

　　else

　　 {

　　 // 抱歉！ 不支持 web 存儲(chǔ)。

　　 }

　　localStorage 對(duì)象存儲(chǔ)的數(shù)據(jù)沒(méi)有時(shí)間限制。第二天、第二周或下一年之后，數(shù)據(jù)依然可用。

　　localStorage.sitename="W3Cschool在線教程";?

　　document.getElementById（"result"）。innerHTML="網(wǎng)站名："?+?localStorage.sitename;

　　嘗試一下 ?

　　實(shí)例解析：

　　使用 key="sitename" 和 value="W3Cschool在線教程" 創(chuàng)建一個(gè) localStorage 鍵/值對(duì)。檢索鍵值為"sitename" 的值然后將數(shù)據(jù)插入 id="result"的元素中。

　　以上實(shí)例也可以這么寫(xiě)：

　　移除 localStorage 中的 "lastname" :

　　不管是 localStorage，還是 sessionStorage，可使用的API都相同，常用的有如下幾個(gè)（以localStorage為例）：

　　保存數(shù)據(jù)：localStorage.setItem（key,value）;讀取數(shù)據(jù)：localStorage.getItem（key）;刪除單個(gè)數(shù)據(jù)：localStorage.removeItem（key）;刪除所有數(shù)據(jù)：localStorage.clear（）;得到某個(gè)索引的key：localStorage.key（index）;

　　提示：?鍵/值對(duì)通常以字符串存儲(chǔ)，你可以按自己的需要轉(zhuǎn)換該格式。

　　下面的實(shí)例展示了用戶點(diǎn)擊按鈕的次數(shù)。

　　代碼中的字符串值轉(zhuǎn)換為數(shù)字類(lèi)型：新建一個(gè)前端學(xué)習(xí)qun438905713，在群里大多數(shù)都是零基礎(chǔ)學(xué)習(xí)者，大家相互幫助，相互解答，并且還準(zhǔn)備很多學(xué)習(xí)資料，歡迎零基礎(chǔ)的小伙伴來(lái)一起交流。

　　if （localStorage.clickcount）

　　{

　　localStorage.clickcount=Number（localStorage.clickcount）+1;
 

　　}

　　else?

　　{

　　localStorage.clickcount=1;

　　}

　　document.getElementById（"result"）。innerHTML="?你已經(jīng)點(diǎn)擊了按鈕？"?+?localStorage.clickcount?+?"?次";

　　嘗試一下

　　sessionStorage 方法針對(duì)一個(gè) session 進(jìn)行數(shù)據(jù)存儲(chǔ)。當(dāng)用戶關(guān)閉瀏覽器窗口后，數(shù)據(jù)會(huì)被刪除。

　　如何創(chuàng)建并訪問(wèn)一個(gè) sessionStorage：：

　　if （sessionStorage.clickcount）

　　 {

　　 sessionStorage.clickcount=Number（sessionStorage.clickcount）+1;

　　 }

　　else

　　 {

　　 sessionStorage.clickcount=1;

　　 }

　　document.getElementById（"result"）。innerHTML="在這個(gè)會(huì)話中你已經(jīng)點(diǎn)擊了該按鈕？"?+?sessionStorage.clickcount?+?"?次？";

到此，關(guān)于“HTML5存儲(chǔ)的方法”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！