Question

我想在我的网页上创建一个按钮，单击该按钮可将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：删除

我正在使用以下代码检查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

我不知道如何链接这两个功能以执行所需的操作。

Answer 1

这里是您的可行解决方案。看一下代码中的注释。

您是JS新手吗？在这种情况下，您应该看看codecademy。它是免费的，您将很快学习基础知识。

请注意，SO不允许您检查或设置Cookie。因此，下面的可运行代码将导致错误。这是a working fiddle。

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>

Answer 2

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

调用getCookie，并根据return的值在removeElement方法末尾调用setCookie。

注意：我假设您的setCookie方法是synchronous。
默认情况下加载button，并在页面为loaded后执行与步骤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');
}

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

2 个答案: