HTML存储详解
和大家一起先來(lái)了解一下H5之前的存儲(chǔ)方式:
cookies的誕生:?
- http請(qǐng)求頭上帶著數(shù)據(jù)
- 大小只能為4K
- 主Domain的污染
下面是百度的一些Cookies
HTTP中帶√的表示,只能被服務(wù)器端修改的數(shù)據(jù),一般用來(lái)存儲(chǔ)身份驗(yàn)證等信息
cookies造成了一系列問(wèn)題,安全問(wèn)題,數(shù)據(jù)帶在請(qǐng)求頭里面,會(huì)被獲取,如果一系列訪問(wèn)會(huì)導(dǎo)致cookies越來(lái)越臃腫。
基于這些問(wèn)題,逐漸出現(xiàn)了新生代的產(chǎn)物,H5。
那H5解決了哪些問(wèn)題呢
- 解決了4K的大小問(wèn)題,
- 解決請(qǐng)求頭常帶存儲(chǔ)信息的問(wèn)題
- 解決了關(guān)系型存儲(chǔ)的問(wèn)題
- 跨瀏覽器
H5的幾種存儲(chǔ)方式
- 本地存儲(chǔ)(localstorage && sessionstorage)
- 離線緩存(application cache)
- IndexedDB 和 Web SQL
1、API(API全稱application program interface,應(yīng)用編程接口。瀏覽器將一個(gè)具有相對(duì)完整功能的程序被封裝起來(lái)供用戶直接使用)
---? localstorage? && sessionstorage
2、存儲(chǔ)形式為
---key --> value形式
3、過(guò)期
--localstorage 永久存儲(chǔ),永不失效,除非手動(dòng)刪除
--sessionstorage 重新打開(kāi)的title里或者關(guān)閉瀏覽器就會(huì)消失
4、大小
---官方給我文檔為每個(gè)域名5M
?
H5可以存儲(chǔ)哪些東西呢:? 數(shù)組、json數(shù)據(jù)、圖片、腳本、樣式文件?
localstorage API介紹
--? getItem
--? setItem
--? removeItem
--? ?key
--? clear
我們?yōu)榱朔奖阒苯釉诳刂婆_(tái)使用這些東西; 用法都是一樣的,可以在其他地方也這樣使用。
?
還有IndexedDB 未說(shuō)到,但是它是用來(lái)代替已經(jīng)廢棄的Web SQL Database出現(xiàn)的。
暫時(shí)未用到過(guò),有發(fā)現(xiàn)的地方再補(bǔ)充
---------------------------------------------------------分割線---------------------------------------------------
?
希望今天的分享能對(duì)大家有所啟發(fā)。大家有不同的意見(jiàn)或建議可以在下面的留言區(qū)跟我交流。
覺(jué)得好可以關(guān)注,后續(xù)還有繼續(xù)推文噢~
?
? ? ??
更多專業(yè)前端知識(shí),請(qǐng)上 【猿2048】www.mk2048.com
總結(jié)
- 上一篇: 让height: 100%生效
- 下一篇: 前端面试题(附上自己的回答)