和大家一起先來了解一下H5之前的存儲方式：

cookies的誕生：?

• http請求頭上帶著數據
• 大小只能為4K
• 主Domain的污染

下面是百度的一些Cookies

　　HTTP中帶√的表示，只能被服務器端修改的數據，一般用來存儲身份驗證等信息

cookies造成了一系列問題，安全問題，數據帶在請求頭里面，會被獲取，如果一系列訪問會導致cookies越來越臃腫。

基于這些問題，逐漸出現了新生代的產物，H5。

　　那H5解決了哪些問題呢

• 解決了4K的大小問題，
• 解決請求頭常帶存儲信息的問題
• 解決了關系型存儲的問題
• 跨瀏覽器

H5的幾種存儲方式

• 本地存儲（localstorage && sessionstorage）
• 離線緩存（application cache）
• IndexedDB 和 Web SQL

1、API（API全稱application program interface，應用編程接口。瀏覽器將一個具有相對完整功能的程序被封裝起來供用戶直接使用）

---? localstorage? && sessionstorage

2、存儲形式為

---key --> value形式

3、過期

--localstorage 永久存儲，永不失效，除非手動刪除

--sessionstorage 重新打開的title里或者關閉瀏覽器就會消失

4、大小

---官方給我文檔為每個域名5M

?

H5可以存儲哪些東西呢：? 數組、json數據、圖片、腳本、樣式文件?

localstorage API介紹

--? getItem

--? setItem

--? removeItem

--? ?key

--? clear

我們為了方便直接在控制臺使用這些東西； 用法都是一樣的，可以在其他地方也這樣使用。

?

還有IndexedDB 未說到，但是它是用來代替已經廢棄的Web SQL Database出現的。

暫時未用到過，有發現的地方再補充

---------------------------------------------------------分割線---------------------------------------------------

?

希望今天的分享能對大家有所啟發。大家有不同的意見或建議可以在下面的留言區跟我交流。

　　　　　　　　　　覺得好可以關注，后續還有繼續推文噢~　

?

? ? ??

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的HTML存储详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。