如何根据cookie值从页面删除元素？

提问者：小点点

如何根据cookie值从页面删除元素？

我想在我的网页上创建一个按钮，单击该按钮时，会将cookie设置为指定值。cookie应该对整个域、其所有目录和子域有效。

我现在使用的代码是：

function setCookie(cname, cvalue, exdays)
    {
        var d = new Date();
        d.setTime(d.getTime() + (365*24*60*60*1000));
        var expires = "expires="+ d.toUTCString();
        document.cookie = cname + "name1" + cvalue + "value1" + expires + ";path=/";
    }

然后，设置cookie及其值后，我希望该按钮从页面中删除。另外，下次加载页面时，我想检查cookie和值是否存在，如果不存在，则显示按钮，否则删除按钮。

上下文中的按钮具有id:delete

我正在使用以下代码检查cookie及其值：

function getCookie(name1)
    {
        var name = name1 + "value1";
        var decodedCookie = decodeURIComponent(document.cookie);
        var ca = decodedCookie.split(';');

        for(var i = 0; i <ca.length; i++)
            {
                var c = ca[i];

                while (c.charAt(0) == ' ')
                    {
                        c = c.substring(1);
                    }

                if (c.indexOf(name) == 0)
                    {
                        return c.substring(name.length, c.length);
                    }
            }

        return "";
    }

我在这里找到了这些代码：https://www.w3schools.com/js/js_cookies.asp

如果cookie及其值存在，我将使用此代码删除元素：

function removeElement(elementId)
    {
        var element = document.getElementById(delete);
        element.parentNode.removeChild(element);
    }

我从这里获取了以下代码：https://www.abeautifulsite.net/adding-and-removing-elements-on-the-fly-using-javascript

我不知道如何将这两个功能联系起来以执行所需的操作。

共2个答案

匿名用户

这里有一个有效的解决方案。看看代码中的注释。

你是新来的吗？在这种情况下，您应该看看codecadiy。它是免费的，你会很快学会基础知识。

请注意，SO不允许您检查或设置cookie。因此，下面的可运行代码将导致错误。这是一把工作小提琴。

if (getCookie('myCookie')) removeElement('myButton'); // remove if cookie is set

if (document.getElementById('myButton')) document.getElementById('myButton').onclick = function() { // bind function to clickevent
  setCookie('myCookie', 'myValue', 1); // set cookie
  removeElement('myButton'); // remove button
}

function setCookie(cname, cvalue, exdays) { // your setCookie Funktion
  var d = new Date();
  d.setTime(d.getTime() + (365 * 24 * 60 * 60 * 1000));
  var expires = "expires=" + d.toUTCString();
  document.cookie = cname + '=' + cvalue + '; '+ expires + ";path=/"; // reset to w3schools solution
}

function getCookie(name) { // your getCookie Funktion
  // removed 'var name = ...' because you wont find your cookie if you changing the name here
  var decodedCookie = decodeURIComponent(document.cookie);
  var ca = decodedCookie.split(';');

  for (var i = 0; i < ca.length; i++) {
    var c = ca[i];

    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }

    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }

  return "";
}

function removeElement(elementId) { // your removeElement Function
  var element = document.getElementById(elementId); // variable delete was undefined, if your buttons id was delete you had to write it in ''
  element.parentNode.removeChild(element);
}

<button type="button" id="myButton">
  click me
</button>

匿名用户

按照您的要求，如果存在cookie，您只需要删除一个特定的按钮。在这种情况下，您需要做两件事。

调用getCookie并基于返回值调用setCookie方法末尾的DetveElement。

注意：我假设您的setCookie方法是synchronous。

默认情况下，加载按钮，并在加载页面后执行与步骤1相同的操作。

总之，您的方法应该如下所示：

setCookie方法：

function setCookie(cname, cvalue, exdays){
    var d = new Date();
    d.setTime(d.getTime() + (365*24*60*60*1000));
    var expires = "expires="+ d.toUTCString();
    document.cookie = cname + "name1" + cvalue + "value1" + expires + ";path=/";
    if(getCookie(cname)) removeElement('delete');
}

加载文档后：

document.onload = ()=>{
    if(getCookie(cname)) removeElement('delete');
}