当页面url更改但不是在jquery中刷新时如何删除cookie？

Question

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

这是我的 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' 下使用此功能，但没有成功。每当我提交某些内容或重新加载页面时，它总是有效的。我想要的只是这种行为：

这是我的下拉菜单：

Teacher => 默认值选项

学生

书籍

这些是我的 dropdwon 的选项，现在如果我选择 Student 然后处理此选项，我的下拉列表应该只有在我更改它之前的学生值。但是如果我更改页面，然后在该页面上再次输入，我应该会得到默认值Teacher。 我应该如何解决这个问题？

Answer 1

您可以使用window.onpopstate 来检测 url 的变化，然后删除您的 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");
    }

希望这会有所帮助。

Answer 2

我在这里猜测，但我想这是您可以提交并且您想要的表单：

• 如果页面是首次打开或在浏览器的新页面/标签中打开，则获取默认下拉选项
• 如果页面重新加载，则保留所选选项
• 在提交表单时将下拉菜单重置为默认选项（因此可能会更改 URL）

您可能想要查看的是sessionStorage，它类似于cookies 和localStorage，允许您保存一些数据（以不同的方式）。

将数据保存到sessionStorage 非常简单：

sessionStorage.setItem('key', 'value');

重要的是，这可能是您问题的完美解决方案，因为开箱即用的sessionStorage 将在页面会话结束时清除您保存的数据。根据documentation（我鼓励您检查）

只要浏览器打开，页面会话就会持续，并且在页面重新加载和恢复时仍然存在

---

要回答您的问题，您可能可以：

• 在更改时使用sessionStorage.setItem('key', 'value') 保存所选选项
• 使用sessionStorage.getItem('key') 检索下拉列表的值
• 在提交表单时使用sessionStorage.removeItem('key') 删除保存的密钥

新页面或标签找不到任何保存的选项，因为 会话 将是一个全新的。

希望这会有所帮助！