$("#btn").on("click", function() {
Cookies.set("show", "on", {
expires: 365
});
$("#js-tips").css("display", "none");
});
$(document).ready(function() {
let tips = Cookies.get("show");
console.log(tips);
if (tips === "on") {
$("#js-tips").css("display", "none");
} else {
$("#js-tips").css("display", "inline-block");
}
});
body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.tips {
display: inline-block;
padding: 30px;
border: 1px solid #222;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/3.0.0/js.cookie.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tips" id="js-tips">
<p>hello world!</p>
<button id="btn">i see</button>
</div>
I use a package called js-cookie, I hope that a welcome window will appear on the web page at the beginning. After clicking the button, the js-cookie plugin can be used to record the cookie in the user's browser, and the next time the user comes to this website, it will be recorded. This welcome window will not appear again, and I hope this record can be recorded for one year, but I don’t know which logic is wrong. The current method is a failure. I hope I can get everyone’s help, thank you.
Or someone knows how to use the original js to set the cookie method to achieve this effect, and also hope to share with me, thank you.
$('#btn').on('click', function(e) {
Cookies.set('tips', '1', {
expires: 365
})
$('#js-tips').css('display', 'none');
})
$(document).ready(function() {
let tips = Cookie.get('tips');
if (tips == 1) {
$('#js-tips').css('display', 'none');
} else {
$('#js-tips').css('display', 'inline-block');
}
})
body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.tips {
display: inline-block;
padding: 30px;
border: 1px solid #222;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/3.0.0/js.cookie.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tips" id="js-tips">
<p>hello world!</p>
<button id="btn">i see</button>
</div>