I have a bootstrap alert.
<div class="checkbox">
<label>
<input type="checkbox"> Don't show this again!
</label>
</div>
If the checkbox is clicked and alert is dissmissed
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
I don't want to show the alert ever again. I am wondering if this can be done with http://www.w3schools.com/js/js_cookies.asp
$('#checkbox').click(function() {
if ($('#checkbox').attr('checked')) {
document.cookie="alert=dismiss";
}
})
and then if there is a cookie hide the message $.hide
method?
Updated with Solution
var oldBrowser = $.browser.msie && parseInt($.browser.versionNumber) < 9;
//message is dismissed via storage
var dissmissed = amplify.store("DoNotShowMessageAgain");
// if oldbrowers and not dismissed
if (oldBrowser && !dissmissed) {
$( "#browserAlert" ).show();
}
// Don't show message again
$('#browserAlert .close').click(function(){
if ($('.checkbox input').is(':checked')) {
amplify.store( "DoNotShowMessageAgain", true );
}
})
My recommendation would be to use HTML5's local storage for this. Its very purpose is a modern way to persist data between sessions for a browser with no expiration:
function localStorageAvailable() {
if (typeof(Storage) !== "undefined") {
return true;
}
else {
return false;
}
}
$('#checkbox').click(function(){
if ($('#checkbox').attr('checked')) {
if (localStorageAvailable())
localStorage.DoNotShowMessageAgain = "true";
}
})
And then then, when the page is ready, you would want to check and restore the functionality from a past saved experience:
if (localStorageAvailable()) {
if (localStorage.DoNotShowMessageAgain && localStorage.DoNotShowMessageAgain === "true") {
// user doesn't want to see the message again, so handle accordingly
}
};
For more information on HTML5's local storage, take a look at my blog post on the topic.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With