设为首页收藏本站
查看: 3090|回复: 0

[前端开发] 015 HTML5详解（四）

[复制链接]
真是低调le
  • TA的每日心情
    开心
    2024-1-13 00:31

    • 签到天数: 535 天

    [LV.9]以坛为家II
    发表于 2021-9-15 21:15:39 | 显示全部楼层 |阅读模式
    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>
    复制代码


    效果如下：



    如上图所示，我们可以在 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：



    格式举例2：

    bash
    CACHE MANIFEST

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


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


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




    缓存清单文件怎么用：

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

    demo.appcache：

    bash
    CACHE MANIFEST

    # 注释以#开头
    #下面是要缓存的文件
    CACHE:
        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>
    复制代码

    回复

    使用道具 举报

    返回列表
    高级模式
    B Color Image Link Quote Code Smilies
    您需要登录后才可以回帖 登录 | 注册

    本版积分规则

    红盟社区--红客联盟 

    Processed in 0.062747 second(s), 21 queries.

    站点统计| 举报| Archiver| 手机版| 黑屋 |   

    备案号：冀ICP备20006029号-1 Powered by HUC © 2001-2021 Comsenz Inc.

    首页

    资讯

    社区

    互助

    家园

    群组

    文库

    文图

    组织活动

    总排行榜

    个人日志

    音乐电台

    爱心赞助

    每日签到

    微信机器

    微信图片

    手机扫我进入移动触屏客户端

    关注我们可获取更多热点资讯

    Honor accompaniments. theme macfee

    快速回复 返回顶部 返回列表