1义辕、簡介
HTML5 提供了兩種在客戶端存儲數(shù)據(jù)的新方法
localStorage - 沒有時間限制 ?一次存儲永久訪問?
sessionStorage - 針對一個 session ( 會話 ) 的數(shù)據(jù)存儲。關(guān)閉當(dāng)前窗口幕帆，存儲的數(shù)據(jù)被刪除
之前，這些都是由 cookie 完成的。為什么不用cookie了？
cookie 不適合大量數(shù)據(jù)的存儲? (只有4k)
cookie 影響網(wǎng)站的性能
cookie 速度慢(因?yàn)樗鼈冇擅總€對服務(wù)器的請求來傳遞) ?安全性也不高
在 HTML5 中峦树，數(shù)據(jù)不是由每個服務(wù)器請求傳遞的，而是只有在請求時使用數(shù)據(jù)旦事。它使在不影響網(wǎng)站性能的情況下存儲大量數(shù)據(jù)成為可能魁巩。
H5Web存儲 在不影響網(wǎng)站性能的情況下存儲大量數(shù)據(jù) (5M)
HTML5 使用 JavaScript 來存儲和訪問數(shù)據(jù)。數(shù)據(jù)以 鍵/值 對存在
對于不同的網(wǎng)站族檬，數(shù)據(jù)存儲于不同的區(qū)域歪赢，并且一個網(wǎng)站只能訪問其自身的數(shù)據(jù)。
--------------------------------------------------------------------------------------------------------------------
2单料、檢查瀏覽器是否支持 localStorage 和sessionStorage
Internet Explorer 8+埋凯、 Firefox、 Opera扫尖、Chrome 和 Safari都支持Web 存儲
<script>
? ? ? ? ? if ( typeof ( Storage ) !== "undefined" ) {
? ? ? ? ? ? ? ? ? ? alert ( "當(dāng)前瀏覽器 支持 localStorage? sessionStorage 對象!")
? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? alert ( "不好意思 H5web存儲比較高大上 哥們我還不支持" )
? ? ? ? ? }
</script>
-----------------------------------------------------------------------------------------------------------------
3白对、localStorage?
localStorage 一次存儲永久訪問,除非數(shù)據(jù)被清空。用戶關(guān)閉當(dāng)前窗口下次訪問依舊能夠獲取數(shù)據(jù)
3.1换怖、創(chuàng)建和訪問 localStorage
<script>
? ? ? ? localStorage.name = "Hungry" ? // name是隨便寫的一個鍵 Hungry是name對應(yīng)的值
? ? ? ? document.write ( localStorage.name ) ? ? // 通過name這個鍵取得name對應(yīng)的值
? ? ? ? ?// 可以用setItem("name", "Hungry") ?和 getItem("name") 代替
</script>
3.2甩恼、練習(xí)-存儲用戶是第幾次訪問網(wǎng)站
<script>
? ? ? ? ? if ( localStorage.pagecount ) {
? ? ? ? ? ? ? ? ? ? // 鍵/值對通常以字符串存儲，你可以按自己的需要轉(zhuǎn)換該格式
? ? ? ? ? ? ? ? ?localStorage.pagecount = Number ( localStorage.pagecount ) +1
? ? ? ? ? } else {
? ? ? ? ? ? ? ? ?localStorage.pagecount = 1
? ? ? ? ? }
? ? ? ? ? document.write ( "訪問第 "+ localStorage.pagecount + " 次 關(guān)閉瀏覽器再次運(yùn)行")
</script>
-------------------------------------------------------------------------------------------------------------------------------------
4沉颂、sessionStorage 方法
sessionStorage 當(dāng)用戶關(guān)閉瀏覽器窗口后条摸，數(shù)據(jù)會被刪除。刷新當(dāng)前頁面铸屉，數(shù)據(jù)不會被刪除钉蒲。
4.1、創(chuàng)建并訪問一個 sessionStorage
<script>
? ? ? ? ? // sessionStorage.name = "Hungry"
? ? ? ? ? // document.write ( sessionStorage.name )?
? ? ? ? ? // 下面寫法等價于上面
? ? ? ? ? sessionStorage.setItem ( "name" , "Hungry" ) ??
? ? ? ? ? document.write ( sessionStorage.getItem ( "name" ) )
</script>
4.2彻坛、練習(xí)-用戶在當(dāng)前 session 中訪問頁面的次數(shù)進(jìn)行計(jì)數(shù)
<script>
? ? ? ? ? if ( sessionStorage.pagecount ) {
? ? ? ? ? ? ? ? ? ? sessionStorage.pagecount = Number ( sessionStorage.pagecount ) +1
? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? sessionStorage.pagecount = 1
? ? ? ? ? }
? ? ? ? ? document.write ( "訪問第 "+ sessionStorage.pagecount + " 次? 關(guān)閉窗口 數(shù)據(jù)被清空")
</script>
-------------------------------------------------------------------------------------------------------------------
5顷啼、Web存儲常用API---5個
不管是 localStorage，還是 sessionStorage昌屉，可使用的API都相同
（1）保存數(shù)據(jù)：localStorage.setItem ( key , value )
（2）讀取數(shù)據(jù)：localStorage.getItem ( key )
（3）刪除單個數(shù)據(jù)：localStorage.removeItem ( key )?
例：
if ( localStorage.pagecount ) {
? ? ? ? ? localStorage.pagecount = Number ( localStorage.pagecount ) +1
? ? //一共10關(guān)钙蒙，讓刷到底10關(guān)的時候，從第一關(guān)開始
? ? ? ? ? if ( localStorage.pagecount > 10 ) {
? ? ? ? ? ? ? ? ? ? localStorage.removeItem ( "pagecount" )?
? ? ? ? ? ? ? ? ? ? localStorage.pagecount = 1?
? ? ? ? ? }
} else {
? ? ? ? ? localStorage.pagecount = 1
}
document.write ( "來到第 "+ localStorage.pagecount + " 關(guān) 刷新一次通過一關(guān) 共10關(guān) 通關(guān)后又來到第一關(guān)")
（4）刪除所有數(shù)據(jù)：localStorage.clear( )
localStorage.name = "男神";
localStorage.englishName = "Hungry";
localStorage.clear( )?
document.write ( localStorage.name + localStorage.englishName )?
（5）得到某個索引的key：localStorage.key ( index )
localStorage.name = "男神"
localStorage.englishName = "Hungry"
document.write ( localStorage.key ( 3 ) )
