HTML5存儲的方法

這篇文章主要介紹“HTML5存儲的方法”，在日常操作中，相信很多人在HTML5存儲的方法問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”HTML5存儲的方法”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

　　使用HTML5可以在本地存儲用戶的瀏覽數據。

　　早些時候，本地存儲使用的是cookies。但是Web 存儲需要更加的安全與快速。 這些數據不會被保存在服務器上，但是這些數據只用于用戶請求網站數據上。它也可以存儲大量的數據，而不影響網站的性能。

　　數據以鍵/值對存在， web網頁的數據只允許該網頁訪問使用。新建一個前端學習qun438905713，在群里大多數都是零基礎學習者，大家相互幫助，相互解答，并且還準備很多學習資料，歡迎零基礎的小伙伴來一起交流。

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

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

　　客戶端存儲數據的兩個對象為：

　　localStorage - 沒有時間限制的數據存儲sessionStorage - 針對一個 session 的數據存儲

　　在使用 web 存儲前，應檢查瀏覽器是否支持 localStorage 和sessionStorage:

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

　　{

　　 // 是的！ 支持 localStorage sessionStorage 對象！

　　// 一些代碼……

　　}

　　else

　　 {

　　 // 抱歉！ 不支持 web 存儲。

　　 }

　　localStorage 對象存儲的數據沒有時間限制。第二天、第二周或下一年之后，數據依然可用。

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

　　document.getElementById（"result"）。innerHTML="網站名："?+?localStorage.sitename;

　　嘗試一下 ?

　　實例解析：

　　使用 key="sitename" 和 value="W3Cschool在線教程" 創建一個 localStorage 鍵/值對。檢索鍵值為"sitename" 的值然后將數據插入 id="result"的元素中。

　　以上實例也可以這么寫：

　　移除 localStorage 中的 "lastname" :

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

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

　　提示：?鍵/值對通常以字符串存儲，你可以按自己的需要轉換該格式。

　　下面的實例展示了用戶點擊按鈕的次數。

　　代碼中的字符串值轉換為數字類型：新建一個前端學習qun438905713，在群里大多數都是零基礎學習者，大家相互幫助，相互解答，并且還準備很多學習資料，歡迎零基礎的小伙伴來一起交流。

　　if （localStorage.clickcount）

　　{

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

　　}

　　else?

　　{

　　localStorage.clickcount=1;

　　}

　　document.getElementById（"result"）。innerHTML="?你已經點擊了按鈕？"?+?localStorage.clickcount?+?"?次";

　　嘗試一下

　　sessionStorage 方法針對一個 session 進行數據存儲。當用戶關閉瀏覽器窗口后，數據會被刪除。

　　如何創建并訪問一個 sessionStorage：：

　　if （sessionStorage.clickcount）

　　 {

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

　　 }

　　else

　　 {

　　 sessionStorage.clickcount=1;

　　 }

　　document.getElementById（"result"）。innerHTML="在這個會話中你已經點擊了該按鈕？"?+?sessionStorage.clickcount?+?"?次？";

到此，關于“HTML5存儲的方法”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！