Как удалить элементы со страницы на основе значения cookie?

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 и его значение, а если нет, показать кнопку или удалить ее.

Кнопка в контексте имеет идентификатор: 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

Я не знаю, как связать эти две функции для выполнения требуемого действия.

Answer 1

Вот рабочее решение для вас.Посмотрите на комментарии внутри Кодекса.

Вы новичок в JS?в этом случае вам стоит взглянуть на codecademy .Это бесплатно, и вы очень быстро освоите основы.

Обратите внимание, что SO не позволяет вам проверять или устанавливать куки.По этой причине запускаемый код ниже приведет к ошибке.Вот рабочая скрипка .

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 присутствует. В этом случае вам нужно будет сделать 2 вещи.

1. Вызовите getCookie и, исходя из значения return, вызовите removeElement в конце метода setCookie.

   Примечание: я предполагаю, что ваш setCookie метод synchronous.

2. Загрузите button по умолчанию и сделайте то же самое, что и Шаг 1, когда страница станет loaded.

Подводя итог, ваши методы должны выглядеть следующим образом:

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');
}