HTML5學習筆記 Web存儲

時間 2020-06-29

標籤 html5 html 學習筆記 web 存儲欄目 HTML5 简体版

原文原文鏈接

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 對象

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>