HTML5學習筆記 Web儲存

浪花一朵朵發表於2015-06-11
HTML筆記Web

HTML5 web儲存，一個比cookie更好的本地儲存方式。

什麼是html5 Web儲存

使用HTML5可以在本地儲存使用者的瀏覽器資料。

早些時候，本地儲存使用的是cookies.但是Web儲存需要更加安全與快速。這些資料不會被儲存在伺服器上，但是這些資料只用於使用者請求網站資料上。它可以儲存大量資料，而不影響網站的效能。

資料以鍵值對存在，web網頁的資料只允許該網頁訪問使用。

localStorage 和sessionStorage

localStorage ：沒有時間限制的資料儲存

sessionStorage：針對一個seeeion的靈氣儲存

在使用web儲存前，應檢查瀏覽器是否支援localStorage 和sessionStorage

if(typeof(Storage)!=="undefined")
   {
   // Yes! localStorage and sessionStorage support!
   // Some code.....
   }
 else
   {
   // Sorry! No web storage support..
   }

localStorage物件儲存的靈氣沒有時間限制，不會過期。

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 物件

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>

本節完

相關文章