重溫---HTML5高階---WebStorage

阿新 • • 發佈：2018-11-07

資料儲存方案:

Web專案中需要儲存多種資料，大體上有兩種儲存方法：

(1)伺服器端儲存：

1)資料庫技術：儲存專案中的核心資料

2)Session技術：儲存當前使用者的資訊

(2)客戶端儲存：不太緊要的與客戶端有關的資料，如瀏覽記錄、內容定製、樣式定製

1)Cookie技術：使用比較繁瑣、大小不能超過4KB

2)Flash技術：逐漸被淘汰

3)HTML5WebStorage技術：使用簡單，大小不超過8MB

4)IndexedDB技術：客戶端直接儲存物件，目前還不是HTML標準技術

Web會話：指客戶端瀏覽器從連線到某個Web伺服器開始，一系列的請求-響應過程。直到客戶端關閉瀏覽器，會話結束。

HTML5的WebStorage技術，提供了兩個物件，用於在瀏覽器中儲存客戶端的訪問資料：

window.sessionStorage——會話級儲存:

在瀏覽器的記憶體中儲存的與某個伺服器間的一系列請求-響應過程中產生的資料——都是Key-Value對形式。當會話結束時(使用者關閉了瀏覽器)，會話級資料即消失。

sessionStorage['key'] = 'value'; //儲存一個數據

var v = sessionStorage['key'];

//讀取一個數據

sessionStorage.length //獲取資料的個數

sessionStorage.setItem('key', 'value') //儲存一個數據

var v = sessionStorage.getItem('key') //讀取一個數據

sessionStorage.removeItem('key') //刪除一個數據

sessionStorage.clear() //清除所有的資料

window.localStorage——本地/跨會話級儲存：

在客戶端檔案系統/硬碟中儲存客戶端與伺服器間的訪問資料——都是Key-Value對形式。即使關閉瀏覽器，甚至關閉計算機仍然存在，否則會永久存在。

localStorage['key'] = 'value'; //儲存一個數據

var v = localStorage ['key']; //讀取一個數據

localStorage.length //獲取資料的個數

localStorage.setItem('key', 'value') //儲存一個數據

var v = localStorage.getItem('key') //讀取一個數據

localStorage.removeItem('key') //刪除一個數據

localStorage.clear() //清除所有的資料

練習：

(1)建立index.html，右上角有一個超連結“登入”，點選此連結跳轉到login.html，使用者在表單中輸入登入資訊，點選“提交按鈕”，假設使用者名稱和密碼都正確，彈出提示“登入成功”，3秒鐘跳轉回首頁，右上角顯示出“歡迎回來：xxx 退出登入”；此時若使用者在位址列強行輸入login.html，直接跳轉到index.html；使用者若點選了index.html上的退出登入超連結，則跳轉到logout.html，提示出“您已退出登入”，3秒鐘跳回index.html，繼續顯示“登入”超連結

setTimeout(function(){

location.href="";

},3000)

程式碼如下:

10_index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    header{
      text-align: right;
      padding:1em;
      border-bottom:1px solid #aaa;
    }
  </style>
</head>
<body>
<header>
  <a href="10_login.html">登入</a>
</header>
<section>
  <h3>首頁</h3>
</section>
<script>
  var n=sessionStorage['LoginName'];
  if(n){
    //若使用者已經登入,則需要修改header中的內容
    var header=document.querySelector('header');
    header.innerHTML=`歡迎回來:${n}<a href="10_logout.html">退出登入</a>`;
  }
</script>
</body>
</html>

10_login.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    header{
      text-align: right;
      padding:1em;
      border-bottom:1px solid #aaa;
    }
  </style>
  <script>
    //若使用者已經登入,則無需再看到此頁面
    var n=sessionStorage['LoginName'];
    if(n){
      location.href='10_index.html';
    }
  </script>
</head>
<body>
<section>
  <h3>使用者登入</h3>
  <hr>
  使用者名稱: <input type="text" id="uname"> <br>
  密  碼: <input type="text" id="upwd"> <br>
  <input type="button" id="btSubmit" value="提交登入資訊">
  <script>
    btSubmit.onclick=function () {
      var n=uname.value;
      var p=upwd.value;
      //此處應該執行非同步的登入資訊驗證
      alert("登入成功,3秒鐘後跳轉回首頁");
      //儲存當前登入的使用者名稱,可以供後續的其他頁面使用
      sessionStorage['LoginName']=n;
      setTimeout(function () {
        location.href='10_index.html';
      },3000);

    }
  </script>
</section>
</body>
</html>

10_logout.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <h3>退出登入</h3>
  <p>退出登入成功!3秒後將跳轉回首頁......</p>
  <script>
    //清除使用者的登入資訊
    sessionStorage.removeItem('LoginName');
    // sessionStorage.clear();
    setTimeout(function () {
      location.href='10_index.html';
    },3000);
  </script>
</body>
</html>

(2)實現一個頁面主題的永久定製

建立index.html，指定3個class

.blue { background: #ccf; color: #339; }

.pink { background: #f3b; color: #916; }

.dark { background: #111; color: #eee; }

提供一個下拉選擇框，“—請選擇您喜歡的頁面主題—”，“湛藍天空”、“芭比公主”、“殺馬特”，選擇某項之後，當前頁面的body就使用對應的className。

跳轉到usercenter.html，預設也呈現出index.html中選中的頁面主題，即使重啟瀏覽器，仍可以呈現出之前選中的主題色。提示：即使重新開啟index.html，也要顯示出之前選中的主題色。

程式碼如下:

12_index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    .blue{
      background:#ccf;
      color:#339;
    }
    .pink{
      background:#f3b;
      color:#916;
    }
    .dark{
      background:#111;
      color:#eee;
    }
  </style>
</head>
<body>
<script>
  var theme=localStorage['UserTheme'];
  if(theme){
    document.body.className=theme;
  }
</script>
  <h3>首頁</h3>
  <select name="" id="selectTheme">
    <option value="0">請選擇您喜歡的頁面主題</option>
    <option value="blue">湛藍天空</option>
    <option value="pink">芭比公主</option>
    <option value="dark">殺馬特黑</option>
  </select>
  <hr>
  <p>sadfjla nfjdkjgoi dfjoiarjgfnvnffdvkfl</p>
  <a href="12_usercenter.html">跳轉到使用者中心</a>
  <script>
    selectTheme.onchange=function () {
      var theme=this.value;
      document.body.className=theme;
      //在客戶端瀏覽器中儲存選擇的主題---磁碟中
      localStorage['UserTheme']=theme;
    }
  </script>
</body>
</html>

12_usercenter.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    .blue{
      background:#ccf;
      color:#339;
    }
    .pink{
      background:#f3b;
      color:#916;
    }
    .dark{
      background:#111;
      color:#eee;
    }
  </style>
</head>
<body>
  <h3>使用者中心</h3>
  <hr>
  <p>sdjfolhgd dsfkjhrlgw dfdkjsglrg fsnjdgkf</p>
  <a href="12_index.html">跳轉回首頁</a>
  <script>
    var theme=localStorage['UserTheme'];
    document.body.className=theme;
  </script>
</body>
</html>

課後練習：單詞測試系統

(1)使用者可以在save.html中不停的錄入新單詞；

(2)進入test.html開始測試，需要對之前錄入過的所有單詞進行測試；

(3)提交答案後，在result.html中顯示出測試成績。

提示：錄入的單詞需要永久儲存；而此次測試結果只需要在當前會話中儲存。