Web 存储应用缓存-CFANZ编程社区

H5 中有两种存储的方式

1、window.sessionStorage 会话存储：

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

2、window.localStorage 本地存储：

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

常见 API

设置存储内容：

	setItem(key, value);

读取存储内容：

	getItem(key);

根据键，删除存储内容：

	removeItem(key);

清空所有存储内容：

	clear();

案例：记住用户名和密码

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
<!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>
</body>
</html>

应用缓存

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

优势

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

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

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

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

`cache manifest` 缓存清单文件

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

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

（1）顶行写CACHE MANIFEST。

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

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

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

CACHE MANIFEST
CACHE:
#要缓存的文件
./img/1.jpg
./img/2.jpg
./img/3.jpg
NETWORK:
#指定必须联网才能访问的文件
./js/1.js
./js/2.js
./js/3.js
FALLBACK:
./css/1.css ./css a.css