如何在 cookie 更改时自动重新加载 html 页面？
我的主 html 页面中有这段代码：
body onload="set_style_from_cookie()"
当我从另一个页面更改主 html 页面的样式时，主页面如何检测到这种更改并自动重新加载？
【问题讨论】：
标签： javascript jquery html cookies jquery-cookie
创建一个这样的函数，它将每隔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>
【讨论】：