javascript - 如何在页面url更改时删除cookie，但在jquery刷新时不删除​​？

Question

如果我的网址发生更改，我想删除 cookie，就好像我不这样做，某些功能就无法正常工作一样。就像我想要的那样，每当我的页面重新加载时，意味着它首先打开，然后我的下拉列表应该具有默认值。我可以轻松做到这一点，但主要问题发生在我更改下拉列表的值时，我也希望此时它应该在下拉列表中具有最后选择的选项。我只需要在第一次打开页面时使用默认值，或者更改页面然后返回到下拉页面网址。

这是我的 cookie 代码:

// create cookie
function setCookie(name, value, days) {
    var expires = "";
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
//delete cookie
function deleteCookie(name) {
     setCookie(name,"",-1);
 }

现在我尝试用这种方式取消设置我的cookie:

if(getCookie("myCookie") !== null && getCookie("myCookie") !== ""){
      $('#formA').val(getCookie("myCookie")).trigger('change');
 }
  else {
      goToDefault(); // this onload has the default value "Teacher"
}

    $(window).on('beforeunload', function(){
         setCookie("myCookie", $('#formA').val(), 12);
    });

   $(window).on('unload', function() {
        if(window.location.pathname !== '/dropdown'){
             deleteCookie("myCookie");   
   }
});

我尝试在$(window).on('beforeunload'上使用此函数，但徒劳无功。每当我提交某些内容或页面重新加载时，它总是有效。我想要的就是这种行为:

这是我的下拉菜单:

老师=>默认值选项

学生

书籍

这些是我的 dropdwon 的选项，现在如果我选择 Student 然后使用此选项，我的下拉列表应该仅在我更改它之前具有作为 Student 的值。但是，如果我更改页面，然后再次进入该页面，我应该获得默认值Teacher。我该如何解决这个问题？

Answer 1

您可以使用window.onpopstate来检测网址的更改，然后删除您的cookie。下面是一个示例:

// create cookie
function setCookie(name, value, days) {
    var expires = "";
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
//delete cookie
function deleteCookie(name) {
     setCookie(name,"",-1);
 }

if(getCookie("myCookie") !== null && getCookie("myCookie") !== ""){
      $('#formA').val(getCookie("myCookie")).trigger('change');
 }
  else {
      goToDefault(); // this onload has the default value "Teacher"
}

    window.onpopstate = () => {
         deleteCookie("myCookie");
    }

希望这有帮助。