• 百 度
  • 京 东
  • 淘 宝
  • 知 乎
  • Bing
  • Google
  • Yandex
  • Quora
  • GitHub
  • StackOverflow
  • SegmentFault
  • 医 疗

使用JavaScript记录cookie更新浏览器html缓存文件

  1. 1. 原理说明
  2. 2. 参考文档
  3. 3. 代码实现

使用 JavaScript 记录 cookie 更新浏览器 html 缓存文件。

1. 原理说明

1.利用浏览器响应 html 文件请求的响应头信息 last-modified(文件最后更新时间) 和 ETag 来判断 html 文件是否更新;
2.实际使用中,因为无法获取 ETag 信息,所以实际仅仅利用了请求头的 last-modified 信息;

2. 参考文档

  1. Web 开发技术请参见 HTTP请参见 HTTP HeadersLast-Modified:
    https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Last-Modified

  2. Web 开发技术请参见 HTTP请参见 HTTP HeadersETag:
    https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/ETag

  3. HTTP的请求头标签 If-Modified-Since:
    https://www.cnblogs.com/zh2000g/archive/2010/03/22/1692002.html

  4. 你知道 http 响应头中的 ETag 是如何生成的吗:
    https://segmentfault.com/a/1190000021251877
    总结:
    nginx 中 etag 由响应头的 Last-Modified 与 Content-Length 表示为十六进制组合而成。
    如果 http 响应头中 ETag 值改变了,是否意味着文件内容一定已经更改:
    https://github.com/shfshanyue/Daily-Question/issues/113
    答案是不一定,由服务器中 ETag 的生成算法决定;
    比如 nginx 中的 etag 由 last_modified 与 content_length 组成,而 last_modified 又由 mtime 组成;
    当编辑文件却未更改文件内容时,或者执行 touch file 的时候,mtime 也会改变,此时 etag 改变,但是文件内容没有更改。

3. 代码实现

// 本代码依赖于 jQuery ;
// jQuery(document).ready(function(){});  意义为在 DOM 加载完毕后执行了ready()方法,简写为 jQuery(function(){});  
$( document ).ready( function ( ) { 
    // 定义一个函数,用来记录 cookie ;
    function HomePageSetCookie_For_CheckHomePageHtmlFileIsChange_For_ReloadHomePageHtmlFile ( ) { 
        // 判断是否为网站的首页;
        if ( window.location.pathname == "/index.html" )  { 
            // 建立 xhr 请求;
            var xhr = new XMLHttpRequest();                                  
            if( !xhr ){  
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");  
            }
            // 参数 HEAD 需要配合 nginx 的配置文件 if ($request_method !~* GET|POST|HEAD) { return 444; } ;否则无法获取回应;
            xhr.open( "HEAD" , window.location.href + "?timestamp=" + Date.now() , true ) ; 
            xhr.onreadystatechange=function(){  
                // xhr 请求成功;
                if( xhr.readyState == 4 && xhr.status == 200 ){  
                    // 定义函数,删除特殊字符串;
                    function DeleteTitle_SpecialString( LastModified ) {
                        LastModified = LastModified.replace(/\s+/g,'') ;  
                        LastModified = ( ( LastModified.replace( /,/g , '' ) ).replace( /;/g , '' ) ).replace( /:/g , '' ) ;  
                        return LastModified ;
                    }
                    // 提取 xhr 响应头的 last-modified ;
                    var ResponseHeaders_LastModified = xhr.getResponseHeader( "last-modified" ) ;
                          ResponseHeaders_LastModified = DeleteTitle_SpecialString( ResponseHeaders_LastModified ) ;
                    // 判断是否已经存在 cookie 记录,正则代码([^;]+)匹配非分号字符; (?:;|$)匹配分号或行尾 ;_HasIndexHtml 表示网站首页的 window.location.pathname 包含 "/index.html" 字符串 ;
                    if ( document.cookie.match(/HomePageSetCookie_ResponseHeaders_LastModified_HasIndexHtml=([^;]+)(;|$)/) != null ) {  
                        // 读取 cookie 记录;
                        var Array_LastModified_HasIndexHtml = document.cookie.match(/HomePageSetCookie_ResponseHeaders_LastModified_HasIndexHtml=([^;]+)(;|$)/); 
                        var Cookie_LastModified_HasIndexHtml = Array_LastModified_HasIndexHtml[ 0 ].substring( Array_LastModified_HasIndexHtml[ 0 ].indexOf( "=" ) + 1 , Array_LastModified_HasIndexHtml[ 0 ].length ) ;
                              Cookie_LastModified_HasIndexHtml = DeleteTitle_SpecialString( Cookie_LastModified_HasIndexHtml ) ;
                        // 根据 last-modified 判断 html 文件已经修改;
                        if ( Cookie_LastModified_HasIndexHtml != ( ResponseHeaders_LastModified + "_HasIndexHtml" ) ) {
                                // 更新 cookie 记录;
                                var cookie_path = "/" ; 
                                document.cookie = "HomePageSetCookie_ResponseHeaders_LastModified_HasIndexHtml="+ResponseHeaders_LastModified+"_HasIndexHtml; expires=Fri, 31 Dec 9999 23:59:59 GMT; " + ( window.location.host == "" ? "" : "domain=" + ( ( window.location.hostname ).indexOf( "www." ) != -1 ? ( window.location.hostname ).substring( 3 , ( window.location.hostname ).length ) : "." + window.location.hostname ) ) + "; path=" + cookie_path + "; SameSite=none; Secure=true" ; 
                                // 刷新网站的首页,更新 html 文件缓存;注意:要先更新 cookie 记录,后执行 window.location.reload( );  否则会导致页面刷新的死循环 ;
                                window.location.reload( ); 
                                // 重新赋值 variable_For_MultiTabPageHtmlReLoad_HasIndexHtml 变量;
                                // 用于浏览器同时打开多个标签页流量网站首页的时候,更新全部标签页的 html 文件缓存;
                                window.variable_For_MultiTabPageHtmlReLoad_HasIndexHtml = document.cookie.match(/HomePageSetCookie_ResponseHeaders_LastModified_HasIndexHtml=([^;]+)(;|$)/); 
                                window.variable_For_MultiTabPageHtmlReLoad_HasIndexHtml = window.variable_For_MultiTabPageHtmlReLoad_HasIndexHtml[ 0 ].substring( window.variable_For_MultiTabPageHtmlReLoad_HasIndexHtml[ 0 ].indexOf( "=" ) + 1 , window.variable_For_MultiTabPageHtmlReLoad_HasIndexHtml[ 0 ].length ) ;
                                window.variable_For_MultiTabPageHtmlReLoad_HasIndexHtml = DeleteTitle_SpecialString( window.variable_For_MultiTabPageHtmlReLoad_HasIndexHtml ) ;
                        }
                        else { // if ( Cookie_LastModified_HasIndexHtml == ( ResponseHeaders_LastModified + "_HasIndexHtml" ) ) {
                            // 更新 cookie 记录;
                            var cookie_path = "/" ;  
                            document.cookie = "HomePageSetCookie_ResponseHeaders_LastModified_HasIndexHtml="+ResponseHeaders_LastModified+"_HasIndexHtml; expires=Fri, 31 Dec 9999 23:59:59 GMT; " + ( window.location.host == "" ? "" : "domain=" + ( ( window.location.hostname ).indexOf( "www." ) != -1 ? ( window.location.hostname ).substring( 3 , ( window.location.hostname ).length ) : "." + window.location.hostname ) ) + "; path=" + cookie_path + "; SameSite=none; Secure=true" ;  
                            // 通过 variable_For_MultiTabPageHtmlReLoad_HasIndexHtml  变量,判断是否其他的标签页已经更新了 html 文件的同时,更新了 cookie  记录 ;
                            // 其他标签页虽然可以更新 cookie ,但是不能更新 本标签页的 window. 对象属性;
                            if ( $.type( window.variable_For_MultiTabPageHtmlReLoad_HasIndexHtml ) == "undefined" ) {
                                    // 定义一个变量,用来解决在 两个 标签页中 同时打开首页的时候:其中一个首页更新了 html 文件,并且重写了 cookie 记录;导致另外一个首页更新 html 文件失败的问题;
                                    // 因为第一个 首页更新 html 文件的时候,已经将 cookie 记录重写为最新的值,此时第二个标签页比对  ResponseHeaders_LastModified 与 cookie 记录,发现是相同的,就不会去更新 html 页面;
                                    // 此处定义一个变量就是为了解决此问题,先将 旧的 cookie 记录挂载到  window.  的全局变量上;
                                    // 如果发现  ResponseHeaders_LastModified 与 cookie 记录相同,那么就再比对最新的 cookie 记录(也就是最后的 ResponseHeaders_LastModified ) 与 全局变量  window.  上挂载的 cookie 旧记录是否相同;因为其他标签页虽然可以更新 cookie ,但是不能更新 本标签页的 window. 对象属性;
                                    // 不相同的话,说明其他的 html 文件已经更新了缓存,那么本标签页就重新载入 html 缓存文件;
                                    var variable_For_MultiTabPageHtmlReLoad_HasIndexHtml = document.cookie.match(/HomePageSetCookie_ResponseHeaders_LastModified_HasIndexHtml=([^;]+)(;|$)/); 
                                          variable_For_MultiTabPageHtmlReLoad_HasIndexHtml = variable_For_MultiTabPageHtmlReLoad_HasIndexHtml[ 0 ].substring( variable_For_MultiTabPageHtmlReLoad_HasIndexHtml[ 0 ].indexOf( "=" ) + 1 , variable_For_MultiTabPageHtmlReLoad_HasIndexHtml[ 0 ].length ) ;
                                          variable_For_MultiTabPageHtmlReLoad_HasIndexHtml = DeleteTitle_SpecialString( variable_For_MultiTabPageHtmlReLoad_HasIndexHtml ) ;
                                    window.variable_For_MultiTabPageHtmlReLoad_HasIndexHtml = variable_For_MultiTabPageHtmlReLoad_HasIndexHtml ;
                            }
                            else if ( window.variable_For_MultiTabPageHtmlReLoad_HasIndexHtml != ( ResponseHeaders_LastModified + "_HasIndexHtml" ) ) {
                                    // 刷新网站的首页,更新 html 文件缓存;
                                    window.location.reload( );
                                    // 重新赋值 variable_For_MultiTabPageHtmlReLoad_HasIndexHtml 变量;
                                    window.variable_For_MultiTabPageHtmlReLoad_HasIndexHtml = document.cookie.match(/HomePageSetCookie_ResponseHeaders_LastModified_HasIndexHtml=([^;]+)(;|$)/); 
                                    window.variable_For_MultiTabPageHtmlReLoad_HasIndexHtml = window.variable_For_MultiTabPageHtmlReLoad_HasIndexHtml[ 0 ].substring( window.variable_For_MultiTabPageHtmlReLoad_HasIndexHtml[ 0 ].indexOf( "=" ) + 1 , window.variable_For_MultiTabPageHtmlReLoad_HasIndexHtml[ 0 ].length ) ;
                                    window.variable_For_MultiTabPageHtmlReLoad_HasIndexHtml = DeleteTitle_SpecialString( window.variable_For_MultiTabPageHtmlReLoad_HasIndexHtml ) ;
                            }
                        }
                    } 
                    else { // == null  ,没有 cookie 记录;
                            var cookie_path = "/" ; 
                            document.cookie = "HomePageSetCookie_ResponseHeaders_LastModified_HasIndexHtml="+ResponseHeaders_LastModified+"_HasIndexHtml; expires=Fri, 31 Dec 9999 23:59:59 GMT; " + ( window.location.host == "" ? "" : "domain=" + ( ( window.location.hostname ).indexOf( "www." ) != -1 ? ( window.location.hostname ).substring( 3 , ( window.location.hostname ).length ) : "." + window.location.hostname ) ) + "; path=" + cookie_path + "; SameSite=none; Secure=true" ;  
                            // 定义一个变量,用来解决在 两个 标签页中 同时打开首页的时候:其中一个首页更新了 html 文件,并且重写了 cookie 记录;导致另外一个首页更新 html 文件失败的问题;
                            // 因为第一个 首页更新 html 文件的时候,已经将 cookie 记录重写为最新的值,此时第二个标签页比对  ResponseHeaders_LastModified 与 cookie 记录,发现是相同的,就不会去更新 html 页面;
                            // 此处定义一个变量就是为了解决此问题,先将 旧的 cookie 记录挂载到  window.  的全局变量上;
                            // 如果发现  ResponseHeaders_LastModified 与 cookie 记录相同,那么就再比对最新的 cookie 记录(也就是最后的 ResponseHeaders_LastModified ) 与 全局变量  window.  上挂载的 cookie 旧记录是否相同;因为其他标签页虽然可以更新 cookie ,但是不能更新 本标签页的 window. 对象属性;
                            // 不相同的话,说明其他的 html 文件已经更新了缓存,那么本标签页就重新载入 html 缓存文件;
                            var variable_For_MultiTabPageHtmlReLoad_HasIndexHtml = document.cookie.match(/HomePageSetCookie_ResponseHeaders_LastModified_HasIndexHtml=([^;]+)(;|$)/); 
                                  variable_For_MultiTabPageHtmlReLoad_HasIndexHtml = variable_For_MultiTabPageHtmlReLoad_HasIndexHtml[ 0 ].substring( variable_For_MultiTabPageHtmlReLoad_HasIndexHtml[ 0 ].indexOf( "=" ) + 1 , variable_For_MultiTabPageHtmlReLoad_HasIndexHtml[ 0 ].length ) ;
                                  variable_For_MultiTabPageHtmlReLoad_HasIndexHtml = DeleteTitle_SpecialString( variable_For_MultiTabPageHtmlReLoad_HasIndexHtml ) ;
                            window.variable_For_MultiTabPageHtmlReLoad_HasIndexHtml = variable_For_MultiTabPageHtmlReLoad_HasIndexHtml ;
                    }
                }  //  if( xhr.readyState == 4 && xhr.status == 200 )  语句结束
            }  //  xhr.onreadystatechange=function()  结束
            xhr.send(null);  
        }
    }
    // 页面打开的时候,立即执行一次函数,判断是否更新 html 文件;
    setTimeout ( function ( ) {
        HomePageSetCookie_For_CheckHomePageHtmlFileIsChange_For_ReloadHomePageHtmlFile ( ) ; 
    } , 1 ) ;
    // 每隔 15 分钟,定时检查 html 文件是否需要更新缓存;
    setInterval ( function ( ) {
            HomePageSetCookie_For_CheckHomePageHtmlFileIsChange_For_ReloadHomePageHtmlFile ( ) ; 
    } , 900000 ) ; 
} ) ; // $(document).ready(function(){ 

转载请注明来源。

文章标题:使用JavaScript记录cookie更新浏览器html缓存文件

本文作者:bas369.com

发布时间:2020-07-21, 16:51:00

最后更新:2020-07-21, 18:07:43

原始链接:https://www.bas369.com/more/learning_notes/2020/07/21/%E4%BD%BF%E7%94%A8JavaScript%E8%AE%B0%E5%BD%95cookie%E6%9B%B4%E6%96%B0%E6%B5%8F%E8%A7%88%E5%99%A8html%E7%BC%93%E5%AD%98%E6%96%87%E4%BB%B6/

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。


  • 关于我们
  • 苏公网安备 32132302010228号
  • 联系我们
目录