Когда пользователь закрывает <div>, скрыть это <div> на всех страницах сайта

Ответ 1

Используйте localStorage().

Локальное хранилище для каждого источника (для домена и протокола)

• При щелчке DIV close вы можете получить текущую отметку времени
• Добавьте количество часов (24) к этой отметке времени
• Сохраните это значение в localStorage как localStorage.setItem('desiredTime', time)
• Проверьте текущую метку времени с сохраненной меткой времени localStorage.getItem('desiredTime') на основе этого show/hide

JQuery

$(document).ready(function(){
        //Get current time
        var currentTime = new Date().getTime();
        //Add hours function
        Date.prototype.addHours = function(h) {    
           this.setTime(this.getTime() + (h*60*60*1000)); 
           return this;   
        }
        //Get time after 24 hours
        var after24 = new Date().addHours(10).getTime();
        //Hide div click
        $('.hide24').click(function(){
            //Hide div
            $(this).hide();
            //Set desired time till you want to hide that div
            localStorage.setItem('desiredTime', after24); 
        });
        //If desired time >= currentTime, based on that HIDE / SHOW
        if(localStorage.getItem('desiredTime') >= currentTime)
        {
            $('.hide24').hide();
        }
        else
        {
            $('.hide24').show();
        }
});

HTML

<div>DIV-1</div>
<div class='hide24'>DIV-2</div>

Заметки

• Вы можете использовать $.cookie, но теперь это более старый подход.
• <div> с классом hide24 будет скрыт только.
• Убедитесь, что вы поместили этот код в общий JavaScript, который загружается на каждый HTTP-запрос вашего веб-сайта.
• Для localStorage у вас должны быть браузеры HTML5.

Веб-хранилище HTML5

Надеюсь, что это поможет.

Ответ 2

Следуя за @Loading.. ответ:

окна предупреждений всегда снова отображаются повторно при перезагрузке исчезает. Любые идеи?

Почему это?

Функции внутри $(document).ready() будут выполняться до тех пор, пока не будет загружена вся DOM. Вот почему визуализируются предупреждения, а затем, как только функция запускается, они скрывают их.

Решение:

Сначала вы можете скрыть свои предупреждения с помощью класса, чтобы воспользоваться тем, что браузер не будет отображать контент до тех пор, пока не будет создан CSSOM.

Используемый класс просто устанавливает свойство display: none;.

.hidden {
  display: none;
}

Это, конечно, вызовет перерисовку в браузере. (см. примечания)

В вашей логике уже отображается предупреждение с помощью

    if (localStorage.getItem('desiredTime') >= currentTime) {
      $('#alert-box-news').hide();
    } else {
      $('#alert-box-news').show();
    }

Поскольку использование .show() добавит встроенный стиль display: block;, он будет иметь более высокую специфичность, чем класс .hidden, показывая предупреждение.

jsFiddle

Примечания:

• Использование display: none; будет подталкивать содержимое под предупреждением вверх или  вниз. Вы можете использовать другие методы, если хотите, например visibility: hidden; или transform, которые не входят в объем этого ответа.

  ---

EDIT:

Ниже будет приведена иллюстрация, в которой выполняются следующие шаги:

• Демо-счетчик увеличен до 20 секунд для тестирования.
• Мы отбрасываем предупреждение и запускаем функцию localStorage, устанавливая ключ desiredTime.
• После того, как ключ был установлен, мы обновляем браузер и нажимаем несколько раз подряд, чтобы увидеть, работает ли ключ.

• Наконец, чтобы проверить, действительно ли ключ установлен, переходим к:

  DevTools (F12) → вкладка приложения → локальное хранилище → оболочка jsFiddle.

• Запуск удаляется еще раз, после окончания обратного отсчета, снова показывая предупреждение.

Иллюстрация:

Нам может понадобиться дополнительная информация, чтобы решить проблему с этим подходом, если она не работает вживую.

Ответ 3

Насколько я понимаю ваш вопрос, скрывая оповещения в течение 24 часов (а затем снова демонстрируя их все снова через день), будет плохой пользовательский интерфейс.

Я предполагаю, что вы загружаете эти предупреждения из какой-то базы данных. Если это так, правильным ответом будет сохранение там статуса. Будь то столбец status или временная метка deleted_at, реализации бесконечны.

В любом случае, я бы сохранил состояние оповещения в базе данных и отфильтровывал ваши данные, когда тянул соответственно.

Таким образом, на ваш взгляд, вы бы (предположив php здесь):

<?php

<?php if(!empty($newlyFilteredAlerts)): ?>
    <article class="alert-box" id="alert-box-news">
        <h1>News Alerts</h1>
        <?php foreach(newlyFilteredAlerts as $alert): ?>
            <p><?= $alert ?></p>
        <?php endforeach;?
        <a class="alert-box-close" id="close-alert-box-news">
          <img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt=""  >
        </a>
    </article>
<?php endif; ?>

Затем вы захотите добавить какой-то конечный пункт, чтобы изменить этот статус базы данных:

$(document).ready(function() {
    $("#close-alert-box-news").click(function() {
        $.post({
            url: '/alerts',
            type: 'DELETE',
            success: function () {
                $("#alert-box-news").hide(800);                    
            },
        });
    });
});

ПРИМЕЧАНИЕ.. Этот ответ предназначен для указания вас в правильном направлении, а не для написания кода 😩. Весь вышеприведенный код полностью непроверен, поэтому, если вы просто скопируете и вставьте его, это может не сработать.

Ответ 4

Попробуйте это решение jsfiddle и прочитайте комментарии относительно пути хранения. Если вы работаете над sub domain, тогда вы должны указать домен в cookie, написанный как в комментариях setCookie(). если вы working on localhost, тогда для домена cookie должно быть установлено значение "или NULL или FALSE вместо" localhost ". Для справки о домене вы можете изучить fooobar.com/questions/17750/...

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
    // document.cookie = cname + "=" + cvalue + ";" + expires + ";domain=.example.com;path=/"; if you are trying in any sub-domain
} 
function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.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 "";
}
$(document).ready(function() {
  if(getCookie('news')==1) { //check if cookie news exist if exist then hide.
    $("#alert-box-news").hide();
  }
  if(getCookie('maintenance')==1) { //check if cookie maintenance exist if exist then hide.
    $("#alert-box-maintenance").hide();
  }
  $("#close-alert-box-news").click(function() {
    setCookie('news',1,1); // set cookie news to 1 for 1 day = 24 hours here setCookie(key,value,number of cookie expiration day)
    $("#alert-box-news").hide(800);
  });
  $("#close-alert-box-maintenance").click(function() {
    setCookie('maintenance',1,1); // set cookie maintenance to 1 for 1 day = 24 hours here setCookie(key,value,number of cookie expiration day)
    $("#alert-box-maintenance").hide(800);
  });
});

Ответ 5

он не будет работать в stackoverflow. вы можете протестировать демонстрационную ссылку

Демо

$(document).ready(function() {
  checkCookie("alertDisplayed")
  $("#close-alert-box-news").click(function() {
    setCookie("alertDisplayed", 'yes', 1);
    $(".alert-box").hide(800);
  });
  $("#close-alert-box-maintenance").click(function() {
    setCookie("alertDisplayed", 'yes', 1);
    $(".alert-box").hide(800);
  });
});

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

function checkCookie(cname) {
  var name = cname + "=";
  var ca = document.cookie.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) {
      $(".alert-box").hide();
    }
  }
  return;
}

.alert-box {
  width: 50vw;
  position: relative;
  margin: 20px auto;
  border: 1px solid black;
}
.alert-box-close {
  position: absolute;
  top: -12px;
  right: -12px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>

<article class="alert-box" id="alert-box-news">
  <h1>News Alerts</h1>
  <p>text text text text text text text text text text text text text text</p>
  <a class="alert-box-close" id="close-alert-box-news">
    <img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
  </a>
</article>

<article class="alert-box" id="alert-box-maintenance">
  <h1>Site Maintenance</h1>
  <p>text text text text text text text text text text text text text text</p>
  <a class="alert-box-close" id="close-alert-box-maintenance">
    <img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
  </a>
</article>

Ответ 6

Cookies и локальное хранилище служат для разных целей. Куки файлы предназначены в первую очередь для чтения на стороне сервера, локальное хранилище можно читать только на стороне клиента.

В вашем случае вы теряете пропускную способность, отправляя все данные в каждый HTTP-заголовок. Поэтому я рекомендую вам использовать локальное хранилище HTML вместо cookie.

В соответствии с технической разницей, а также моим пониманием:

• Помимо старого способа сохранения данных, Cookies дают вам ограничение в 4096 байт - его куки файл. Локальное хранилище размером 5 МБ на домен
• localStorage - это реализация интерфейса хранения. Он хранит данные без истечения срока действия и очищается только с помощью JavaScript или очистки кэша браузера/локально хранимых данных - в отличие от срока действия файла cookie.

https://jsfiddle.net/eath6oyy/33/

$(document).ready(function() {
var currentTime = new Date().getTime();
var timeAfter24 = currentTime + 24*60*60*1000;
  $("#close-alert-box-news").click(function() {
    $("#alert-box-news").hide(800);
    //Set desired time till you want to hide that div
    localStorage.setItem('desiredTime', timeAfter24); 
  });
  if(localStorage.getItem('desiredTime') >= currentTime)
  {
    $('#alert-box-news').hide();
  }else{
    $('#alert-box-news').show();
  }
  
  
  $("#close-alert-box-maintenance").click(function() {
    $("#alert-box-maintenance").hide(800);
    //Set desired time till you want to hide that div
    localStorage.setItem('desiredTime1', timeAfter24); 
  });
  if(localStorage.getItem('desiredTime1') >= currentTime)
  {
    $('#alert-box-maintenance').hide();
  }else{
    $('#alert-box-maintenance').show();
  }
 
});

.alert-box {
  width: 50vw;
  position: relative;
  margin: 20px auto;
  border: 1px solid black;
}

.alert-box-close {
  position: absolute;
  top: -12px;
  right: -12px;
  cursor: pointer;
}

<article class="alert-box" id="alert-box-news">
  <h1>News Alerts</h1>
  <p>text text text text text text text text text text text text text text</p>
  <a class="alert-box-close" id="close-alert-box-news">
    <img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
  </a>
</article>

<article class="alert-box" id="alert-box-maintenance">
  <h1>Site Maintenance</h1>
  <p>text text text text text text text text text text text text text text</p>
  <a class="alert-box-close" id="close-alert-box-maintenance">
    <img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
  </a>
</article>

Ответ 7

Мой ответ - это расширение @Loading answer. Проблема со вспышкой содержимого при загрузке страницы, даже когда пользователь решил отклонить предупреждение (а), связан с оценкой для localStorage, выполняемой после загрузки DOM.

Поэтому я бы рекомендовал скрывать предупреждения по умолчанию, даже если это может быть проблемой для браузеров без JS. Однако это можно обойти, если вы используете modernizr.js, который добавит класс к элементу HTML при обнаружении JS, и вы можете соответствующим образом измените базовые стили, например:

.alert-box {
  display: none;
}
.no-js .alert-box {
  display: block;
  /* Other styles */
}

Мое решение использует localStorage и полагается на параметры хранения как стробируемый объект: два ключа, хранящиеся в одном поле, - hidden (для сохранения статуса окна) и timestamp (чтобы сохранить время, когда поле уволен). Они могут использоваться для оценки того, был ли (1) выбранным пользователем отклонение предупреждения и (2) действие было выполнено в течение 24 часов.

Некоторые изменения, внесенные мной в ваш код:

• Используйте контекстно-зависимый выбор, так что вам не нужно объявлять несколько похожих обработчиков событий кликов для всех предупреждающих ящиков. Это делает код более простым и менее избыточным.
• Используйте https для URL-адреса изображения, чтобы он не работал с JSfiddle HTTPS:)

Рабочий код показан следующим образом, но localStorage здесь не работает из-за ограничений безопасности: для функциональной демонстрации ссылается на обновленную версию JSfiddle.

$(function() {
  // Check for localStorage
  if (typeof window.localStorage !== typeof undefined) {
    // Loop through all alert boxes
    $('.alert-box').each(function() {
      var $t = $(this),
        key = $t.attr('id');

      // If key exists and it has not expired
      if (window.localStorage.getItem(key)) {
        var json = JSON.parse(window.localStorage.getItem(key));
        if (json.hide && json.timestamp < Date.now() + 1000 * 60 * 60 * 24) {
          $t.hide();
        } else {
          $t.show();
        }
      } else {
        $t.show();
      }
    });
  }

  // Bind click events to alert boxes
  $('.alert-box a.alert-box-close').click(function() {
    var $alertBox = $(this).closest('.alert-box');

    // Hide box
    $alertBox.hide(800);

    // Store option in localStorage, using the box ID as key
    if (typeof window.localStorage !== typeof undefined) {
      window.localStorage.setItem($alertBox.attr('id'), JSON.stringify({
        hide: true,
        timestamp: Date.now()
      }));
    }
  });

  // For demo purposes only, clear localStorage to ease testing
  $('#clear-localstorage').click(function() {
    window.localStorage.clear();
  });
});

.alert-box {
  display: none;
  width: 50vw;
  position: relative;
  margin: 20px auto;
  border: 1px solid black;
}

.alert-box-close {
  position: absolute;
  top: -12px;
  right: -12px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article class="alert-box" id="alert-box-news">
  <h1>News Alerts</h1>
  <p>text text text text text text text text text text text text text text</p>
  <a class="alert-box-close" id="close-alert-box-news">
    <img src="https://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
  </a>
</article>

<article class="alert-box" id="alert-box-maintenance">
  <h1>Site Maintenance</h1>
  <p>text text text text text text text text text text text text text text</p>
  <a class="alert-box-close" id="close-alert-box-maintenance">
    <img src="https://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
  </a>
</article>

<button id="clear-localstorage">Clear local storage (for testing)</button>

Ответ 8

Вы должны просто использовать локальное хранилище.

HTML

<article class="alert-box" id="alert-box-news">
  <h1>News Alerts</h1>
  <p>text text text text text text text text text text text text text text</p>
  <a class="alert-box-close" id="close-alert-box-news">
    <img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
  </a>
</article>

<article class="alert-box" id="alert-box-maintenance">
  <h1>Site Maintenance</h1>
  <p>text text text text text text text text text text text text text text</p>
  <a class="alert-box-close" id="close-alert-box-maintenance">
    <img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
  </a>
</article>

Javascipt

  $(document).ready(function() {
    var nd = new Date(); // initial values for date variables
    var md = nd;
    // check if localStorage item regarding news element exists
      if(!localStorage.getItem("newsclicked")) {
        $("#alert-box-news").show(800);    
        } else {
        var oldnd = new Date(localStorage.getItem("newsclicked")); // retrieve the time that the element was hidden and calculate difference from date and time now. if comparison result is bigger than 1 day then show news box.
        var nddiff = (nd.getTime()-oldnd.getTime())/(60*60*24*1000);
        if(nddiff>=1){
        $("#alert-box-news").show(800);     
        }
        }
    // check if localStorage item regarding maintenance element exists
      if(!localStorage.getItem("maintenanceclicked")) {
        $("#alert-box-maintenance").show(800);    
        } else {
        var oldmd = new Date(localStorage.getItem("maintenanceclicked")); // retrieve the time that the element was hidden and calculate difference from date and time now. if comparison result is bigger than 1 day then show maintenance box.
        var mddiff = (md.getTime()-oldmd.getTime())/(60*60*24*1000);
        if(mddiff>=1){
        $("#alert-box-maintenance").show(800);     
        }
        }
      $("#close-alert-box-news").click(function() {
        $("#alert-box-news").hide(800);
        nd = new Date(); // get the current date and time that close-alert-box-news was clicked and store it to localStorage
        localStorage.setItem("newsclicked",nd);
      });
      $("#close-alert-box-maintenance").click(function() {
        $("#alert-box-maintenance").hide(800);    
        md = new Date(); // get the current date and time that close-alert-box-maintenance was clicked and store it to localStorage
        localStorage.setItem("maintenanceclicked",md);
      });
    });

CSS

.alert-box {
  width: 50vw;
  position: relative;
  margin: 20px auto;
  border: 1px solid black;
}

.alert-box-close {
  position: absolute;
  top: -12px;
  right: -12px;
  cursor: pointer;
}
#alert-box-news,#alert-box-maintenance{
  display:none; // by default have both elements hidden.
}

Вот update в вашем скрипте, чтобы проверить его в действии. Обновите страницу после закрытия div

Ответ 9

Вы можете пойти с кодом, который у вас есть, и установить cookie, срок действия которого истекает через 24 часа:

• Установите MDN JavaScript Cookie Framework

• На вашем js задайте переменную tomorrow, удерживающую дату истечения срока действия вашего файла cookie:

  var today = new Date();
  var tomorrow = today.setHours(today.getHours() + 24);
  

• Установите свои файлы cookie следующим образом:

  docCookies.setItem('hide_news', 'true', tomorrow);
  

• Условно скрыть поля на основе значения cookie

  if (docCookies.getItem('hide_news') == 'true'){
    $("#alert-box-news").add_class('hidden');
  };
  

• Определите класс hidden в вашем файле CSS

  .hidden {
    display none;
  }
  

Вы можете увидеть все это в действии в этот код.

Ответ 10

Это возможно с помощью sessionStorage javascript.

Например:

Сохранение текущей даты (var currentDate) и даты после одной минуты (var afterOneMinute) в sessionStorage. Каждый щелчок на кнопке или перезагрузка страницы, изменение текущей даты и сравнение их с переменной afterOneMinute и после скрытия или окна показа

html Файл

<head>
    <script src="jquery.js"></script>
</head>
<body>
<button onclick="hideOneMinute()">Hide box while 1 minute </button>
<div id="box" style="border: 1px solid red; display: inherit">
    <h2>Box</h2>
    hello
</div>
<div id="messageBox"></div>
</body>

JS

<script>
    var currentDate, afterOneMinute;
    function addDate(){
        var current = new Date();
        // Converts current date in seconds
        currentDate = current.getHours()*3600+current.getMinutes()*60+current.getSeconds();
        // Current date + 1 minute
        afterOneMinute = currentDate + 1*60;
    }
    addDate();
    console.log(currentDate);
    // verify sessionStorage when page is reloaded    ;
    if(typeof(Storage) !== "undefined") {
        if(sessionStorage.currentDate){
            addDate();
            sessionStorage.currentDate = currentDate;
            if(Number(sessionStorage.currentDate) < Number(sessionStorage.afterOneMinute))
            {
                $('#box').hide();
                console.log('hide');
            }
            else{
                sessionStorage.clear();
                console.log('show');
                $('#box').show();
            }

        }
    }
    function hideOneMinute() {
        if(typeof(Storage) !== "undefined") {
            if(sessionStorage.currentDate){
                addDate();
                sessionStorage.currentDate = currentDate;
                if(Number(sessionStorage.currentDate) < Number(sessionStorage.afterOneMinute))
                {
                    $('#box').hide();
                }
                else{
                    sessionStorage.clear();
                    console.log('show');
                    $('#box').show();
                }

            }else{
                addDate();
                sessionStorage.currentDate = currentDate;
                sessionStorage.afterOneMinute = afterOneMinute;
                console.log('hide');
                $('#box').hide();
            }
            document.getElementById("messageBox").innerHTML = "Box will be shown at " + sessionStorage.afterOneMinute;
        } else {
            document.getElementById("messageBox").innerHTML = "Sorry, your browser does not support web storage...";
        }
    }
</script>

Ответ 11

Обновлен script с 24-часовой проверкой

Как и где вы сохраняете метку времени, вам больше подходит, какой элемент управления вы хотите использовать.

Поскольку есть вовлеченный пользователь, я бы пошел на стороне сервера и создаю, то есть дополнительное поле в таблице базы данных пользователей, где эти состояния сохранены.

Таким образом, в отличие от пользователя, который может очищать файлы cookie/хранилище, вы контролируете, какие предупреждения должны оставаться скрытыми и как долго.

Вторым преимуществом было бы то, что это может быть, сверхурочно, накатным, где определенные действия могут быть предприняты на основе пользователей и их учетных данных.

В любом случае я бы построил show/hide, как это, где вы храните класс или атрибут, т.е. тег html, который контролирует, будет ли поле визуальным или нет.

Преимущество этого заключается в том, что вы избавляетесь от проблемы "первое шоу, затем спрятаетесь", и оно будет работать либо с добавлением его на стороне сервера, либо с помощью script.

Вот простой пример с использованием script, простого javascript, и он никоим образом не оптимизирован, это просто для логики, которую я хотел показать.

Так как это фактически не будет выполняться как фрагмент Stack из-за некоторой проблемы безопасности, вот скрипка, которая делает: https://jsfiddle.net/essjuj4y/10/

Нажав кнопку For this demo - to clear local storage, хранилище будет очищено, а когда страница снова будет запущена, появятся поля.

/*  add an event handler to be able to close a box  */
var alerts = document.querySelectorAll('.alert-box-close');
for (var i = 0; i < alerts.length; i++) {
  alerts[i].addEventListener('click', function(e) {
    var boxtype = e.target.parentElement.id.split('-').pop();
    document.getElementById('alert-box-' + boxtype).style.display = "none";
    localStorage.setItem("al-" + boxtype, new Date());
  })
}

/*  add an event handler to be able to clear storage - for demo purpose  */
document.querySelector('button').addEventListener('click', function(e) {
  localStorage.clear();
})

.alert-box {
  display: none;
  width: 50vw;
  position: relative;
  margin: 20px auto;
  border: 1px solid black;
}

.alert-box-close {
  position: absolute;
  top: -12px;
  right: -12px;
  cursor: pointer;
}

.al-news #alert-box-news,
.al-maintenance #alert-box-maintenance {
  display: block;
}

<html>
  <head>
    <script type='text/javascript'>
      function has24HourPassed(key) {
        var storeval = localStorage.getItem(key);
        if (!storeval) return true;    /*  nothing stored in storage  */
        var T24_HOUR = 24 * 60 * 60 * 1000;
        if ((new Date - new Date(storeval)) < T24_HOUR) return false;        
        localStorage.removeItem(key);  /*  24 hours passed so we can remove stored date  */
        return true;
      }
      (function(d) {
        if (has24HourPassed('al-news')) {
          d.classList.add('al-news');
        }
        if (has24HourPassed('al-maintenance')) {
          d.classList.add('al-maintenance');
        }
      })(document.documentElement);
    </script>
  </head>
  
  <body>
    <article class="alert-box" id="alert-box-news">
      <h1>News Alerts</h1>
      <p>text text text text text text text text text text text text text text</p>
      <a class="alert-box-close" id="close-alert-box-news">
        <img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
      </a>
    </article>

    <article class="alert-box" id="alert-box-maintenance">
      <h1>Site Maintenance</h1>
      <p>text text text text text text text text text text text text text text</p>
      <a class="alert-box-close" id="close-alert-box-maintenance">
        <img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
      </a>
    </article>

    <button>For this demo - to clear local storage</button>

  </body>
</html>

Ответ 12

Мой конкретный и ленди-процесс Я предлагаю вам поддерживать базу данных задней базы (например, sql, mysql и т.д.), для которой можно просто удерживать user_id, отображать окно предупреждения или не создавать этот тип из двух столбцов в этой таблице.

1) Если ваш пользователь является зарегистрированным пользователем, используйте ваш сайт, используя идентификатор пользователя или деталь, который вы можете управлять этим окном.

2) Если пользователь не зарегистрирован, что время использует MAC-идентификатор посетителя.