zoukankan      html  css  js  c++  java
  • 客户端存储

    JavaScript第20章客户端存储:http://www.cnblogs.com/ahthw/p/4340930.html  (localStorage和sessionStorage、cookie、IE userData)

    HTML5 localStorage本地存储 笔记                                             

      在HTML5中本地存储属性是一个window属性,包括localStorage和sessionStorage

      if(window.localStorage){

          alert("浏览器支持");     

      }else{

         alert("浏览器不支持");

       }

      HTML5操作使用localStorage:

         1.三种设置本地存储的方法:

             localStorage.t1="php100";

             localStorage["t2"] = "html5";

             localStorage.setItem("t3","jQuery");

         2.三种访问本地存储的方法

            localStotage.t1;

            localStorage["t2"];

            localStorage.getItem("t3");

         3.其他扩展

            localStorage.removeItem(); //清除:eg: localStorage.removeItem("t2");

            localStorage.clear(); //清除所有

            localStorage.length; //获得多少键

            localStorage.key(); //获取存储的键的内容 localStorage.getItem(localStorage.key(0));

    移动Web的离线应用                                                                                       

       1.离线与缓存                        

         离线应用,就是在没有网络的情况下访问Web应用程序时,实际上是访问已下载的离线文件资源,并使Web应用程序正常工作

         离线应用与网页缓存都是为了更好地缓存各种文件以提高读取的速度,但两者对网络环境的要求有所区别:

            1.网页缓存依赖于网络的存在,而离线应用在离线状态下任然可用

            2.网页缓存主要缓存当前页面相关内容,也仅限于当前页面的读取。离线应用则主要缓存文件,只要设置缓存文件的页面,都能在离线状态下读取该文件。

         离线设备的支持:

               if(window.applicationCache){

                  //浏览器支持离线应用,在此编写离线应用功能

                 }

      2.applicationCache 和 manifest      

          HTML5标准提供的离线应用,开发者一般需要注意以下3种特性:

             1.离线资源缓存

               开发者在开发Web应用程序的离线应用时,必须使用一种方案来说明Web应用程序中的哪些文件资源需要在离线状态下工作。

               当设备所在的浏览器处于在线状态时,被指定缓存的资源文件便会缓存到本地。此后,若用户在离线状态时再次访问该Web应用程序,浏览器便会自动加载本地资源文件,让用户能够正常使用该Web应用程序 

              离线应用程序将使用manifest类型的文件作为需要配置缓存资源文件的配置文件。

            2.ApplicationCache 对象缓存状态

               ApplicationCache对象记录着Web应用程序的缓存状态,开发者可以通过该缓存状态手动更新资源文件的缓存

            3.在线状态的检测

               HTML5标准提供了onLine方法用于检测当前网络是否在线。开发者可以根据方法判断出浏览器是否在线,以便能够处理各种业务。

       3.manifest文件                        

            离线应用包含一个manifest文件,此文件记录着哪些资源文件需要离线应用缓存,哪些资源需要通过网络访问等信息

            <!DOCTYPE html>
         <html manifest="cache.manifest">
            <head>
                <meta charset="utf-8">
                <title>判断设备是否能上网</title>
                </head>
            <body>
            </body>
        </html>

            1.只需要在页面的HTML标签中增加manifest属性,并指定manifest文件,就可以实现支持HTML5离线应用。

            2.由于manifest文件的MIME类型是text/cache-manifest,因此web服务器需要通过配置MIME类型,才能识别manifest文件。

            例如在Tomcat服务器下,开发人员需要在Tomcat目录下的conf/web.xml文件中配置manifest类型。

             在web.xml中mime-mapping类型处增加如下代码即可:

               <mine-mapping>

                     <extension>manifest</extension>

                     <mime-type>text/cache-manifest</mime-type>

              </mine-mapping>

           3.CACHE MANIFEST文件

             该代码的作用是通知浏览器下面的内容是一个应用离线的清单文件。在清单文件内容中,共有三种类型的清单文件,如:

             CACHE MANIFEST

             #缓存文件

             index.html

             test.js

             #不作缓存

              NETWORK

              /images/

             FALLBACK

             offline.html   index.html

             根据上述示例代码:

                第一种类型的文件,其文件清单在CACHE MANIFEST 的后面,此部分文件被定义为需要缓存的文件。当网络不可用或不在线时,此部分文件便会通过本地缓存直接读取

                第二种类型的文件清单则在定义NETWORK行下面,该文件清单被指定为无论文件是否已被缓存,都必须从网络中下载。

                第三种类型的文件清单被指定为FALLBACK类型文件,该文件清单的前半部分表示当前无法获取到该文件的时候,则请求转发到后半部分的文件。

        4.applicationCache对象和事件              

          applicationCache对象记录着本地缓存的各种状态及事件。缓存的状态可以通过window.applicationCache.status获得。其状态包括6种:

          interface ApplicationCache : EventTarget{

             const unsigned short UNCACHED = 0;//未缓存

             const unsigned short IDLE = 1; //空闲状态

             const unsigned short CHECKING = 2;//检查中

             const unsigned short DOWNLOADING = 3;//下载中

            const unsigned short UPDATEREADY = 4;//更新准备中

            const unsigned short OBSOLETE = 5;//过期状态

            readonly attribute unsigned short status;

          }

                                                                applicationCache缓存对象事件表

    事件名称 说明
    Cheching 当user agent 检查更新时,或第一次下载manifest清单时,它往往会是第一个被触发的事件
    Noupdate 当检查到manifest中清单文件不需要更新时,触发该事件
    downloading 第一次下载或更新manifest清单文件时,触发该事件
    Progress 该事件与downloading类似,但downloading事件只触发一次。progress事件则在清单文件下载过程中周期性触发
    Cached 当manifest清单文件下载完毕及成功缓存后,触发该事件
    updateready 此事件的含义表示缓存清单文件已经下载完毕,可通过重新加载页面读取缓存文件或通过方法swapCache()切换到新的缓存文件。常用于本地缓存更新版本后的提示
    Obsolete 假如访问manifest缓存文件返回HTTP404错误(页面未找到)或410错误(永久消失)时,触发该事件
    Error

    若要达到触发该事件,需要满足以下几种情况之一:

     已经触发obselete事件

     manifest文件没有改变,但缓存文件中存在文件下载失败

     获取manifest资源文件时发生致命错误

     当更新本地缓存时,manifest文件再次被更改

    通过对上述每个事件的简单描述,读者基本上了解了离线应用的事件。在实际应用中我们可以通过事件监听,并根据当前applicationCache对象的状态处理相关业务。如:

       applicationCache.addEventListener('updateready',function(){

            //资源文件下载中,可以在此部分增加业务功能

    });

    我们在使用applicationCache本地缓存的同时,往往需要判断当前浏览器的状态(在线或离线)。HTML5正好提供了一个属性,用于判断当前浏览器是否在线,代码:

        window.navigator.onLine //onLine 属于只读属性,返回的是布尔值true或false

        if(window.navigator.onLine){ //当前浏览器在线 }else{ //当前浏览器不在线 }

  • 相关阅读:
    js 高阶函数之柯里化
    JavaScript 相关的工具代码
    JS 数组、对象的深拷贝
    页面性能优化
    axios(封装使用、拦截特定请求、判断所有请求加载完毕)
    java 实现登录验证码 (kaptcha 验证码组件)
    告别 hash 路由,迎接 history 路由
    解决 Vue 动态生成 el-checkbox 点击无法赋值问题
    分享基于 websocket 网页端聊天室
    vue + element 动态渲染、移除表单并添加验证
  • 原文地址:https://www.cnblogs.com/hanxuming/p/5885187.html
Copyright © 2011-2022 走看看