如何在标签关闭时删除 jquery cookie答案

【问题标题】：how to delete jquery cookie on tab close如何在标签关闭时删除 jquery cookie
【发布时间】：2012-02-27 19:20:22
【问题描述】：

我的 cookie 工作正常，我没有提到日期，所以当浏览器窗口关闭时，cookie 会被删除。

但是当我关闭浏览器窗口中的选项卡时，cookie 不会被删除，并且在我打开网站时会打开相同的保留 cookie 状态页面

当用户关闭浏览器选项卡时如何删除 cookie？

下面是我的代码

$(document).ready(function(){
var href = $.cookie("activeElementHref");
if(href!==null)
{
setContainerHtml(href);
};

$('nav ul li a').click(function(e){
    e.preventDefault();
    href= $(this).attr('href');
    $.cookie("activeElementHref", href) 
    setContainerHtml(href);
});

}); 
$(window).unload(function() {
$.cookies("activeElementHref",null);
});

function setContainerHtml(href) {
        $.ajax({
        type: "POST",
        url: "baker.php",
        data:{send_txt: href},
        success: function(data){
            $('#aside-right, #intro').css('display','none');
            $('#main-content').fadeOut('10', function (){
            $('#main-content').css('width','700px');
            $('#main-content').css('margin','-30px 0 0 100px');
            $('#main-content').html(data);
            $('#main-content').fadeIn('8000');
            });
        }   
    });
}

【问题讨论】：

可能重复：stackoverflow.com/questions/805895/…
您找到解决方案了吗？我有同样的问题，我只需要在标签关闭时删除 cookie，而不是在页面刷新时删除

标签： javascript jquery cookies

【解决方案1】：

你必须删除.unload事件的cookie

$(window).unload(function() {
   $.cookies.del('myCookie');
});

【讨论】：

我添加了 Window.unload 事件，但是当我刷新时，窗口被卸载并且 cookie 被删除，甚至没有保留状态
刷新页面也是先卸载页面。
卸载事件甚至会在页面刷新时删除我设置了 cookie 的 cookie
要小心onunload 和onbeforeunload 事件，即使当您的应用程序不是单页应用程序时，它们也会触发，即使您并不真正期望它。在浏览器的后退按钮上，当您实际上在同一个网站上时，您也会触发它
'unload' 事件将在选项卡关闭、浏览器关闭和刷新时调用。不是合适的方式。

【解决方案2】：

前面的答案假设您的 cookie 未标记为仅限 http。如果你想防止 XSS 攻击，你可能应该将你的 cookie 设置为 http-only，并且通过 javascript 更改 cookie 将不起作用。

解决方案是从服务器中删除 cookie，这将需要在关闭选项卡之前发出 HTTP 请求。

大部分 JS 库会使用异步 HTTP 请求，这会导致选项卡在从服务器接收到过期 cookie 之前关闭，因此异步调用将无法可靠地工作。

我能够使其可靠工作的唯一方法（至少在 Chrome 上）是进行同步调用：

window.onbeforeunload = function () {

    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open("POST", "api/logout", false);
    xmlhttp.setRequestHeader("Content-type", "application/json");
    xmlhttp.send();
}

只需确保您的服务器中的 Logout 端点保持简单，以便响应快速且 UI 不会被阻塞太久。

编辑：如前所述，仅当它是单页应用程序时才应使用 onbeforeunload 来终止 cookie。

【讨论】：

一个很好的答案，但是标签关闭时的同步请求可能是不可接受的用户体验
感谢 Google，此模式不再有效：我收到 JavaScript 错误：“未捕获的 NetworkError：无法在 'XMLHttpRequest' 上执行 'send'：无法加载 'mysite.tld'：页面中的同步 XHR解雇。有关详细信息，请参阅chromestatus.com/feature/4664843055398912。”

【解决方案3】：

您可以在 onunload 和 onbeforeunload 事件上调用删除 cookie 函数。

删除cookie的功能在这里how to delete cookie in jquery at the time of browser closing?

【讨论】：

我添加了 Window.unload 事件，但是当我刷新时，窗口被卸载并且 cookie 被删除，甚至没有保留状态