重温---HTML5高级---WebStorage

数据存储方案:

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中显示出测试成绩。

提示：录入的单词需要永久保存；而此次测试结果只需要在当前会话中保存。

//遍历客户端存储的数据

for(var i=0; i<localStorage.length; i++){

var key = localStorage.key(i) //获取第i个key

var value = localStorage[key]; //获取第i个value

}

重温---HTML5高级---WebStorage

猜你喜欢