HTML5详解（三） | 全栈大前端

# Web 存储

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式我们以 document.cookie 来进行存储的，但是由于其存储大小只有 4k 左右，并且解析也相当的复杂，给开发带来诸多不便，HTML5 规范则提出解决方案。

# H5 中有两种存储的方式

1、window.sessionStorage 会话存储：

保存在内存中。
生命周期为关闭浏览器窗口。也就是说，当窗口关闭时数据销毁。
在同一个窗口下数据可以共享。

2、window.localStorage 本地存储：

有可能保存在浏览器内存里，有可能在硬盘里。
永久生效，除非手动删除（比如清理垃圾的时候）。
可以多窗口共享。

# Web 存储的特性

（1）设置、读取方便。

（2）容量较大，sessionStorage 约 5M、localStorage 约 20M。

（3）只能存储字符串，可以将对象 JSON.stringify() 编码后存储。

# 常见 API

设置存储内容：

setItem(key, value);

PS：可以新增一个 item，也可以更新一个 item。

读取存储内容：

getItem(key);

根据键，删除存储内容：

removeItem(key);

清空所有存储内容：

clear();

根据索引值来获取存储内容：

key(n);

sessionStorage 的 API 举例：

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <input type="text" />
    <button>sesssionStorage存储</button>
    <button>sesssionStorage获取</button>
    <button>sesssionStorage更新</button>
    <button>sesssionStorage删除</button>
    <button>sesssionStorage清除</button>
    <script>
      //在h5中提供两种web存储方式

      // sessionStorage  session（会话，会议） 5M  当窗口关闭是数据销毁  内存
      // localStorage    20M 永久生效 ，除非手动删除  清理垃圾  硬盘上

      var txt = document.querySelector("input");

      var btns = document.querySelectorAll("button");
      //        sessionStorage存储数据
      btns[0].onclick = function() {
        window.sessionStorage.setItem("userName", txt.value);
        window.sessionStorage.setItem("pwd", "123456");
        window.sessionStorage.setItem("age", 18);
      };

      //        sessionStorage获取数据
      btns[1].onclick = function() {
        txt.value = window.sessionStorage.getItem("userName");
      };

      //        sessionStorage更新数据
      btns[2].onclick = function() {
        window.sessionStorage.setItem("userName", txt.value);
      };

      //        sessionStorage删除数据
      btns[3].onclick = function() {
        window.sessionStorage.removeItem("userName");
      };

      //        sessionStorage清空数据
      btns[4].onclick = function() {
        window.sessionStorage.clear();
      };
    </script>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

效果如下：

如上图所示，我们可以在 Storage 选项卡中查看 Session Storage 和 Local Storage。

localStorage 的 API 举例：

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <input type="text" />
    <button>localStorage存储</button>
    <button>localStorage获取</button>
    <button>localStorage更新</button>
    <button>localStorage删除</button>
    <button>localStorage清除</button>

    <script>
      /*
       *  localStorage
       *  数据存在硬盘上
       *  永久生效
       *  20M
       * */

      var txt = document.querySelector("input");
      var btns = document.querySelectorAll("button");

      //        localStorage存储数据
      btns[0].onclick = function() {
        window.localStorage.setItem("userName", txt.value);
      };

      //        localStorage存储数据
      btns[1].onclick = function() {
        txt.value = window.localStorage.getItem("userName");
      };

      //        localStorage删除数据
      btns[3].onclick = function() {
        window.localStorage.removeItem("userName");
      };
    </script>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

# 案例：记住用户名和密码

代码：

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <label for=""> 用户名：<input type="text" class="userName" /> </label>
    <br /><br />
    <label for=""> 密 码：<input type="text" class="pwd" /> </label>
    <br /><br />
    <label for="">
      <input type="checkbox" class="check" id="" />记住密码
    </label>
    <br /><br />
    <button>登录</button>

    <script>
      var userName = document.querySelector(".userName");
      var pwd = document.querySelector(".pwd");
      var chk = document.querySelector(".check");
      var btn = document.querySelector("button");

      //        当点击登录的时候 如果勾选“记住密码”，就存储密码；否则就清除密码
      btn.onclick = function() {
        if (chk.checked) {
          //                记住数据
          window.localStorage.setItem("userName", userName.value);
          window.localStorage.setItem("pwd", pwd.value);
        } else {
          //                清除数据
          window.localStorage.removeItem("userName");
          window.localStorage.removeItem("pwd");
        }
      };
      //        下次登录时，如果记录的有数据，就直接填充
      window.onload = function() {
        userName.value = window.localStorage.getItem("userName");
        pwd.value = window.localStorage.getItem("pwd");
      };
    </script>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

# 网络状态

我们可以通过 window.onLine 来检测用户当前的网络状况，返回一个布尔值。另外：

window.online：用户网络连接时被调用。
window.offline：用户网络断开时被调用（拔掉网线或者禁用以太网）。

网络状态监听的代码举例：

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <script>
      window.addEventListener("online", function() {
        alert("网络连接建立！");
      });

      window.addEventListener("offline", function() {
        alert("网络连接断开！");
      });
    </script>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 应用缓存

HTML5 中我们可以轻松的构建一个离线（无网络状态）应用，只需要创建一个 cache manifest 缓存清单文件。

# 优势

1、可配置需要缓存的资源；

2、网络无连接应用仍可用；

3、本地读取缓存资源，提升访问速度，增强用户体验；

4、减少请求，缓解服务器负担。

# `cache manifest` 缓存清单文件

缓存清单文件中列出了浏览器应缓存，以供离线访问的资源。推荐使用 .appcache作为后缀名，另外还要添加 MIME 类型。

缓存清单文件里的内容怎样写：

（1）顶行写 CACHE MANIFEST。

（2）CACHE: 换行指定我们需要缓存的静态资源，如.css、image、js 等。

（3）NETWORK: 换行指定需要在线访问的资源，可使用通配符（也就是：不需要缓存的、必须在网络下面才能访问的资源）。

（4）FALLBACK: 换行当被缓存的文件找不到时的备用资源（当访问不到某个资源时，自动由另外一个资源替换）。

格式举例 1：

格式举例 2：

CACHE MANIFEST

#要缓存的文件
CACHE:
    images/img1.jpg
    images/img2.jpg


#指定必须联网才能访问的文件
NETWORK:
     images/img3.jpg
     images/img4.jpg


#当前页面无法访问是回退的页面
FALLBACK:
    404.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

缓存清单文件怎么用：

（1）例如我们创建一个名为 demo.appcache的文件。例如：

demo.appcache：

CACHE MANIFEST

# 注释以#开头
#下面是要缓存的文件
CACHE:
    http://img.smyhvae.com/2016040101.jpg

1
2
3
4
5
6

（2）在需要应用缓存在页面的根元素(html)里，添加属性 manifest="demo.appcache"。路径要保证正确。例如：

<!DOCTYPE html>
<html manifest="01.appcache">
  <head lang="en">
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <img src="http://img.smyhvae.com/2016040101.jpg" alt="" />
  </body>
</html>

1
2
3
4
5
6
7
8
9
10

← HTML5详解（二）浏览器工作原理一 →