11-HTML5详解（三）

Web 存储

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

H5 中有两种存储的方式

1、window.sessionStorage 会话存储：

  • 保存在内存中。

  • 生命周期为关闭浏览器窗口。也就是说，当窗口关闭时数据销毁。

  • 在同一个窗口下数据可以共享。

2、window.localStorage 本地存储：

  • 有可能保存在浏览器内存里，有可能在硬盘里。

  • 永久生效，除非手动删除（比如清理垃圾的时候）。

  • 可以多窗口共享。

Web 存储的特性

（1）设置、读取方便。

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

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

常见 API

设置存储内容：

  1.     setItem(key, value);

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

读取存储内容：

  1.     getItem(key);

根据键，删除存储内容：

  1.     removeItem(key);

清空所有存储内容：

  1.     clear();

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

  1.     key(n);

sessionStorage 的 API 举例：

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8. <input type="text"/>
  9. <button>sesssionStorage存储</button>
  10. <button>sesssionStorage获取</button>
  11. <button>sesssionStorage更新</button>
  12. <button>sesssionStorage删除</button>
  13. <button>sesssionStorage清除</button>
  14. <script>
  16.     //在h5中提供两种web存储方式
  18.     // sessionStorage  session（会话，会议） 5M  当窗口关闭是数据销毁  内存
  19.     // localStorage    20M 永久生效 ，除非手动删除  清理垃圾  硬盘上
  21.     var txt = document.querySelector('input');
  23.     var btns = document.querySelectorAll('button');
  24.     //        sessionStorage存储数据
  25.     btns[0].onclick = function () {
  26.         window.sessionStorage.setItem('userName', txt.value);
  27.         window.sessionStorage.setItem('pwd', '123456');
  28.         window.sessionStorage.setItem('age', 18);
  29.     }
  31.     //        sessionStorage获取数据
  32.     btns[1].onclick = function () {
  33.         txt.value = window.sessionStorage.getItem('userName');
  34.     }
  36.     //        sessionStorage更新数据
  37.     btns[2].onclick = function () {
  38.         window.sessionStorage.setItem('userName', txt.value);
  39.     }
  41.     //        sessionStorage删除数据
  42.     btns[3].onclick = function () {
  43.         window.sessionStorage.removeItem('userName');
  44.     }
  46.     //        sessionStorage清空数据
  47.     btns[4].onclick = function () {
  48.         window.sessionStorage.clear();
  49.     }
  50. </script>
  51. </body>
  52. </html>

效果如下：

11-HTML5详解（三） - 图1

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

localStorage 的 API 举例：

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8. <input type="text"/>
  9. <button>localStorage存储</button>
  10. <button>localStorage获取</button>
  11. <button>localStorage更新</button>
  12. <button>localStorage删除</button>
  13. <button>localStorage清除</button>
  15. <script>
  17.     /*
  18.     *  localStorage
  19.     *  数据存在硬盘上
  20.     *  永久生效
  21.     *  20M
  22.     * */
  24.     var txt = document.querySelector('input');
  25.     var btns = document.querySelectorAll('button');
  27.     // localStorage存储数据
  28.     btns[0].onclick = function () {
  29.         window.localStorage.setItem('userName', txt.value);
  30.     }
  32.     // localStorage获取数据
  33.     btns[1].onclick = function () {
  34.         txt.value = window.localStorage.getItem('userName');
  35.     }
  37.     // localStorage删除数据
  38.     btns[3].onclick = function () {
  39.         window.localStorage.removeItem('userName');
  40.     }
  42. </script>
  43. </body>
  44. </html>

案例：记住用户名和密码

代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8. <label for="">
  9.     用户名：<input type="text" class="userName"/>
  10. </label>
  11. <br/><br/>
  12. <label for="">
  13.     密 码：<input type="text" class="pwd"/>
  14. </label>
  15. <br/><br/>
  16. <label for="">
  17.     <input type="checkbox" class="check" id=""/>记住密码
  18. </label>
  19. <br/><br/>
  20. <button>登录</button>
  22. <script>
  23.     var userName = document.querySelector('.userName');
  24.     var pwd = document.querySelector('.pwd');
  25.     var chk = document.querySelector('.check');
  26.     var btn = document.querySelector('button');
  28.     //        当点击登录的时候 如果勾选“记住密码”，就存储密码；否则就清除密码
  29.     btn.onclick = function () {
  30.         if (chk.checked) {
  31. //                记住数据
  32.             window.localStorage.setItem('userName', userName.value);
  33.             window.localStorage.setItem('pwd', pwd.value);
  34.         } else {
  35. //                清除数据
  36.             window.localStorage.removeItem('userName');
  37.             window.localStorage.removeItem('pwd');
  38.         }
  39.     }
  40.     //        下次登录时，如果记录的有数据，就直接填充
  41.     window.onload = function () {
  42.         userName.value = window.localStorage.getItem('userName');
  43.         pwd.value = window.localStorage.getItem('pwd');
  45.     }
  46. </script>
  47. </body>
  48. </html>

网络状态

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

  • window.online：用户网络连接时被调用。

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

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8. <script>
  9.     window.addEventListener('online', function () {
  10.         alert('网络连接建立！');
  11.     });
  13.     window.addEventListener('offline', function () {
  14.         alert('网络连接断开！');
  15.     })
  16. </script>
  17. </body>
  18. </html>

应用缓存

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

优势

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

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

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

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

cache manifest 缓存清单文件

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

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

（1）顶行写CACHE MANIFEST。

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

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

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

格式举例1：

11-HTML5详解（三） - 图2

格式举例2：

  1. CACHE MANIFEST
  3. #要缓存的文件
  4. CACHE:
  5.     images/img1.jpg
  6.     images/img2.jpg
  9. #指定必须联网才能访问的文件
  10. NETWORK:
  11.      images/img3.jpg
  12.      images/img4.jpg
  15. #当前页面无法访问是回退的页面
  16. FALLBACK:
  17.     404.html

缓存清单文件怎么用：

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

demo.appcache：

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

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

  1. <!DOCTYPE html>
  2. <html manifest="01.appcache">
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8. <img src="http://img.smyhvae.com/2016040101.jpg" alt=""/>
  9. </body>
  10. </html>