HTML5 本地存储（Web Storage）
HTML5 提供了兩種在客戶端存儲數據的新方法：
- localStorage - 本地永久存儲，下次打開瀏覽器數據依然存在
- sessionStorage - 只存在于一個會話的數據存儲，關閉瀏覽器數據會被清除
?
1、目前大部分的瀏覽器已支持web storage, 當然也可以檢測一下：
1 if (!window.localStorage) { 2 alert('您的瀏覽器不支持localStorage'); 3 } 4 5 if (!window.sessionStorage) { 6 alert('您的瀏覽器不支持sessionStorage'); 7 }?
2、方法
? ?localStorage，sessionStorage 有5個方法，使用方法一致，以下localStorage為例：
-
? ?localStorage.setItem([string] key, [string] value); ? ? ?//本地客戶端存儲一個字符串類型的數據
-
? ?localStorage.getItem([string] key); ? ? ? ? ? ? ? ? ? ? ? ? ?//可以讀取已知key值的value
-
? ?localStorage.removeItem([string] key); ? ? ? ? ? ? ? ? ? ?//刪除指定key的item
-
? ?localStorage.clear(); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //清除localstorage所有key/value鍵位對
- ? ?localStorage.key([number] index); ? ? ? ? ? ? ? ? ? ? ? ? ?//得到某個索引的key
?
3、示例?
? ? 記錄進入頁面次數，查看?localStorage 與?sessionStorage 存儲數據的變化。
? ? Html:? ??
1 <div> 2 進入頁面次數(localStorage)：<mark id="local"></mark> time(s) 3 <br> 4 進入頁面次數(sessionStorage)：<mark id="session"></mark> time(s) 5 </div>?
? ??Javascript:
1 //記錄localStorage進入頁面次數 2 var count1 = localStorage.getItem('localCount') ? parseInt(localStorage.getItem('localCount')) + 1 : 1; 3 localStorage.setItem('localCount', count1); 4 document.getElementById('local').innerHTML = count1; 5 6 //記錄sessionStorage進入頁面次數 7 var count2 = sessionStorage.getItem('sessionCount') ? parseInt(sessionStorage.getItem('sessionCount')) + 1 : 1; 8 sessionStorage.setItem('sessionCount', count2); 9 document.getElementById('session').innerHTML = count2;?
?step1：進入chrome刷新頁面10次
??
?step2：關閉chrome再重新打開
?
? ?說明：關閉頁面后，sessionStorage 的值丟失
?
?step3：第一次進入firefox
??
? ?說明：瀏覽器之間的數據是各自獨立的，firefox 讀取不到 chrome的客戶端存儲數據?
?step4：清空chrome的cookie
? ?
? ? 說明：清空cookie，localStorage 與 sessionStorage 的數據均被清除?
?
?源代碼：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>在客戶端存儲數據</title> 6 </head> 7 <body> 8 <div> 9 進入頁面次數(localStorage)：<mark id="local"></mark> time(s) 10 <br> 11 進入頁面次數(sessionStorage)：<mark id="session"></mark> time(s) 12 </div> 13 <script> 14 if (window.localStorage) { //sessionStorage 15 //記錄localStorage進入頁面次數 16 var count1 = localStorage.getItem('localCount') ? parseInt(localStorage.getItem('localCount')) + 1 : 1; 17 localStorage.setItem('localCount', count1); 18 document.getElementById('local').innerHTML = count1; 19 20 //記錄sessionStorage進入頁面次數 21 var count2 = sessionStorage.getItem('sessionCount') ? parseInt(sessionStorage.getItem('sessionCount')) + 1 : 1; 22 sessionStorage.setItem('sessionCount', count2); 23 document.getElementById('session').innerHTML = count2; 24 } 25 </script> 26 </body> 27 </html> View Code?
轉載于:https://www.cnblogs.com/bean-sprout/p/5913634.html
總結
以上是生活随笔為你收集整理的HTML5 本地存储（Web Storage）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Ztree手风琴效果(第三版)
- 下一篇： jQuery10种不同动画效果的响应式全