cookie更改时自动重新加载(自动刷新）html页面

auto reload (auto refresh) html page when cookie change

本文关键字：页面 加载 html 刷新 新加载 cookie      更新时间：2023-09-26

当cookie发生变化时，html页面如何自动重新加载？

我在我的主html页面上有这样的代码：

 body onload="set_style_from_cookie()"

当我从另一个页面更改主html页面的样式时，主页面如何检测到这种更改并自动重新加载？

制作这样一个函数，在每个0.1 seconds 检查您的cookie

//keep track of our cookie
var cookieRegistry = [];
function listenCookieChange(cookieName, callback) {
    setInterval(function() {
        if (cookieRegistry[cookieName]) {
            if (readCookie(cookieName) != cookieRegistry[cookieName]) {
                // update registry so we dont get triggered again
                cookieRegistry[cookieName] = readCookie(cookieName);
                return callback();
            }
        } else {
            cookieRegistry[cookieName] = readCookie(cookieName);
        }
    }, 100);
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}

绑定

listenCookieChange('cookiename', function() {
    Location.reload();
});

但是，这将每秒执行此脚本10x，因此您可能需要更改此脚本。为此，请更改"100"。（如果您将其更改为1000，它将每秒检查一次）。

这个会起作用：

我只是包含了一个定时间隔来检查cookie是否更改：

现在，如果你打开另一个窗口，它也会更新！

在这个演示中只是关于背景颜色。但你可以改变它，添加你需要的风格。

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
<style type="text/css">
</style>
<script type="text/javascript">
function cookieWrite(name,value,days){var expires=""; if(days){var date=new Date(); date.setTime(date.getTime()+(days*86400000)); expires="; expires="+date.toUTCString();} document.cookie=name+"="+value+expires+"; path=/";}
function cookieRead(name){var n=name+"="; var ca=document.cookie.split(";"); for(var i=0; i<ca.length; i++){var c=ca[i]; while(c.charAt(0)==" "){c=c.substring(1,c.length);} if(c.indexOf(n)==0){return c.substring(n.length,c.length);}} return "";}
function cookieDelete(name){if(!name){var ca=document.cookie.split(";"); for(var i=0;i<ca.length; i++){var cv=ca[i].split("="); cookieWrite(cv[0],"",-1);}}else{cookieWrite(name,"",-1);}}
var mybgcolor="";
var cookieIntervall=setInterval(monitorCookie, 2000);
function set_style_from_cookie(bgcolor){
    if(typeof bgcolor=="undefined"){bgcolor=cookieRead("backgroundColor");}
    cookieWrite("backgroundColor", bgcolor, 7);
    document.body.style.backgroundColor=bgcolor;
    mybgcolor=bgcolor;
}
function monitorCookie(){
    var bgcolor=cookieRead("backgroundColor");
    if(mybgcolor!=bgcolor) set_style_from_cookie(bgcolor);
};
window.addEventListener("load",function(){set_style_from_cookie();},false);
</script>
</head>
<body>
<div> <button type="button" onclick="set_style_from_cookie('blue')">BLUE</button> </div>
<div> <button type="button" onclick="set_style_from_cookie('black')">BLACK</button> </div>
<div> <button type="button" onclick="set_style_from_cookie('white')">WHITE</button> </div>
<div> <button type="button" onclick="set_style_from_cookie('red')">RED</button> </div>
<div> <button type="button" onclick="set_style_from_cookie('yellow')">YELLOW</button> </div>
<hr />
<div>refresh page to see that the BG-color will be read from cookie</div>
</body>
</html>
相关文章：