HTML5 web存儲,一個比cookie更好的本地存儲方式。javascript
什麼是html5 Web存儲html
使用HTML5能夠在本地存儲用戶的瀏覽器數據。html5
早些時候,本地存儲使用的是cookies.可是Web存儲須要更加安全與快速。這些數據不會被保存在服務器上,可是這些數據只用於用戶請求網站數據上。它能夠存儲大量數據,而不影響網站的性能。java
數據以鍵值對存在,web網頁的數據只容許該網頁訪問使用。jquery
localStorage 和sessionStorageweb
localStorage :沒有時間限制的數據存儲瀏覽器
sessionStorage:針對一個seeeion的靈氣存儲安全
在使用web存儲前,應檢查瀏覽器是否支持localStorage 和sessionStorage服務器
if(typeof(Storage)!=="undefined") { // Yes! localStorage and sessionStorage support! // Some code..... } else { // Sorry! No web storage support.. }
localStorage對象存儲的靈氣沒有時間限制,不會過時。cookie
localStorage.lastname="Smith";
document.getElementById("result").innerHTML="Last name: "
+ localStorage.lastname;
下面的實例記錄了用戶的點擊次數
if (localStorage.clickcount) { localStorage.clickcount=Number(localStorage.clickcount)+1; } else { localStorage.clickcount=1; } document.getElementById("result").innerHTML="You have clicked the button " + localStorage.clickcount + " time(s).";
sessionStorage 方法針對一個 session 進行數據存儲。當用戶關閉瀏覽器窗口後,數據會被刪除。
如何建立並訪問一個 sessionStorage:
if(sessionStorage.clickcount) { sessionStorage.clickcount=Number(sessionStorage.clickcount)+1; } else { sessionStorage.clickcount=1; } document.getElementById("result").innerHTML="You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";
來看效果:
鏈接點擊19次後,看 sessionStorage
再開一個選項卡看sessionStorage: 從圖中能夠看出,打開新的選項卡後,單擊次數顯示是1,意味着上一次單擊的數並無被記住。
一樣看localStorage,localStorage單擊了7次,
再開一個選項卡看效果:單擊一次localStorage按鈕,記錄數顯示8,在上一次的基礎上加1.
完整的demo:
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>LocalStorage</title> <script src="~/Scripts/jquery-2.1.3.min.js"></script> <script type="text/javascript"> function clickCounter() { if (typeof (Storage) !== "undefined") { if (sessionStorage.clickcount) { sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1; } else { sessionStorage.clickcount = 1; } $('#result').html(''); $('#result').append('<p>' + sessionStorage.clickcount + '</p>'); } else { $('#result').text('抱歉您的瀏覽器不支持本地存儲'); } } function clickCounter2() { if (typeof (Storage) !== "undefined") { if (localStorage.clickcount) { localStorage.clickcount = Number(localStorage.clickcount) + 1; } else { localStorage.clickcount = 1; } $('#result2').html(''); $('#result2').append('<p>' + localStorage.clickcount + '</p>'); } else { $('#result2').text('抱歉您的瀏覽器不支持本地存儲'); } } </script> </head> <body> <div> <p> <button onclick="clickCounter()" type="button">sessionStorage查看單擊次數</button> </p> <div id="result"></div> <p>單擊按鈕查看統計次數</p> </div> <div> <p> <button onclick="clickCounter2()" type="button">localStorage查看單擊次數</button> </p> <div id="result2"></div> <p>單擊按鈕查看統計次數</p> </div> </body> </html>
本節完