Как скрыть баннер после клика и сохранить с LocalStorage? - PullRequest
Новая
       15

Как скрыть баннер после клика и сохранить с LocalStorage?

0 голосов
/ 26 апреля 2019

Я новичок в Java Script и не могу понять, как сохранить информацию (localstorage) после того, как пользователь нажимает кнопку «Принять» на моем баннере cookie - как только он нажимает кнопку «Принять», баннер баннера исчезает, и я хотел бы сохранить эту информацию, поэтому он не получает Баннер Печенья снова, как только он переходит на следующую страницу или перезагружает его.

Я благодарен за любую помощь, которую вы можете оказать.

Вот мой код: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
	$(document).ready(function(){
		$("#Accept").click(function(){
		$('#CookieBanner').hide();
		}); 
	});
</script>
		
	<div id="CookieBanner">
	 	<div class="agj">
			<div class="agj-content">
				<div class="initial-info">
					<h2 class="title">Privacy</h2>
						
						<p class="message">
							This website uses cookies to provide you with the best possible service and website functionality, and to provide social media features and analyse the traffic to our website. If you continue to use our website, you agree to our using cookies.
						</p>
						
				</div>
					<div class="buttons">
						<button id="Accept">Accept</button>
						<a class="link" href="#" title="Get more Information about Cookies and how we use them">Show Purposes</a>
					</div>
			</div>
		</div>
	</div>

Ответы [ 2 ]

2 голосов
/ 26 апреля 2019

localStorage предоставляет два метода setItem() и getItem() для установки и извлечения данных.При загрузке страницы вы можете проверить значение, которое вы установили, и скрыть баннер, или, если он еще не установлен, зарегистрировать свой обработчик кликов. 

$(document).ready(function() {
  if (window.localStorage.getItem('cookies-accepted') === '1') {
    $('#CookieBanner').hide();
  } else {
    $("#Accept").click(function() {
      $('#CookieBanner').hide();
      window.localStorage.setItem('cookies-accepted', '1');
    });
  }
});
1 голос
/ 26 апреля 2019

Для решения проблемы достаточно использовать методы getItem и setItem 

$(document).ready(function(){
    // Check if the user already accepted it
    if (window.localStorage.getItem('accept_cookies')) {
        $('#CookieBanner').hide();
    }

    $("#Accept").click(function(){
        // Save on LocalStorage
        window.localStorage.setItem('accept_cookies', true);
        $('#CookieBanner').hide();
    }); 
});

Подробнее о localStorage можно прочитать в веб-документах MDN: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

...