admin管理员组文章数量:1026989
I'm new to Java Script and I can't figure out how to save the Information (localstorage) after the User clicks on Accept on my Cookie Banner - As soon as he clicks on Accept the Cookie Banner disappears and I would like to save this information, so he doesnt get the Cookie Banner again as soon as he goes to the next page or reloads it.
I'm thankfull for any help you can provide.
Here is my code:
<script src=".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>
I'm new to Java Script and I can't figure out how to save the Information (localstorage) after the User clicks on Accept on my Cookie Banner - As soon as he clicks on Accept the Cookie Banner disappears and I would like to save this information, so he doesnt get the Cookie Banner again as soon as he goes to the next page or reloads it.
I'm thankfull for any help you can provide.
Here is my code:
<script src="https://ajax.googleapis./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>
Share
Improve this question
asked Apr 25, 2019 at 22:06
user10916795user10916795
1
- What have you tried? I do not see any attempt here to use localStorage – Taplar Commented Apr 25, 2019 at 22:08
2 Answers
Reset to default 6Using getItem
and setItem
methods is enough to solve it
$(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();
});
});
You can read more about localStorage on MDN web docs: https://developer.mozilla/en-US/docs/Web/API/Window/localStorage
localStorage
provides the two methods setItem()
and getItem()
to set and retrieve data. On page load, you can check for the value you set and hide the banner, or if it has not been set yet, register your click handler.
$(document).ready(function() {
if (window.localStorage.getItem('cookies-accepted') === '1') {
$('#CookieBanner').hide();
} else {
$("#Accept").click(function() {
$('#CookieBanner').hide();
window.localStorage.setItem('cookies-accepted', '1');
});
}
});
I'm new to Java Script and I can't figure out how to save the Information (localstorage) after the User clicks on Accept on my Cookie Banner - As soon as he clicks on Accept the Cookie Banner disappears and I would like to save this information, so he doesnt get the Cookie Banner again as soon as he goes to the next page or reloads it.
I'm thankfull for any help you can provide.
Here is my code:
<script src=".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>
I'm new to Java Script and I can't figure out how to save the Information (localstorage) after the User clicks on Accept on my Cookie Banner - As soon as he clicks on Accept the Cookie Banner disappears and I would like to save this information, so he doesnt get the Cookie Banner again as soon as he goes to the next page or reloads it.
I'm thankfull for any help you can provide.
Here is my code:
<script src="https://ajax.googleapis./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>
Share
Improve this question
asked Apr 25, 2019 at 22:06
user10916795user10916795
1
- What have you tried? I do not see any attempt here to use localStorage – Taplar Commented Apr 25, 2019 at 22:08
2 Answers
Reset to default 6Using getItem
and setItem
methods is enough to solve it
$(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();
});
});
You can read more about localStorage on MDN web docs: https://developer.mozilla/en-US/docs/Web/API/Window/localStorage
localStorage
provides the two methods setItem()
and getItem()
to set and retrieve data. On page load, you can check for the value you set and hide the banner, or if it has not been set yet, register your click handler.
$(document).ready(function() {
if (window.localStorage.getItem('cookies-accepted') === '1') {
$('#CookieBanner').hide();
} else {
$("#Accept").click(function() {
$('#CookieBanner').hide();
window.localStorage.setItem('cookies-accepted', '1');
});
}
});
本文标签: javascriptHow to Hide Banner after click and Save with LocalStorageStack Overflow
版权声明:本文标题:javascript - How to Hide Banner after click and Save with LocalStorage? - Stack Overflow 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://it.en369.cn/questions/1745659867a2161823.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论