如何在本地存储中添加"不再显示此消息"复选框？

Question

我有一个引导警报。

<div class="checkbox">
    <label>
        <input type="checkbox"> Don't show this again!
    </label>
</div>

如果复选框被点击并且警报被解除

<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>

我不想再显示警告了。我想知道这是否可以做到http://www.w3schools.com/js/js_cookies.asp

$('#checkbox').click(function() {
    if ($('#checkbox').attr('checked')) {
        document.cookie="alert=dismiss";
    }
})

然后如果有一个cookie隐藏消息$.hide方法?

更新解决方案

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 );
 }
}) 

Answer 1

我的建议是使用HTML5的本地存储。它的目的是在浏览器会话之间持久保存数据的一种现代方式，没有过期:

function localStorageAvailable() {
    if (typeof(Storage) !== "undefined") {
        return true;
    }
    else {
        return false;
    }
}
$('#checkbox').click(function(){
    if ($('#checkbox').attr('checked')) {
        if (localStorageAvailable())
            localStorage.DoNotShowMessageAgain = "true";
    }
}) 

然后，当页面准备好了，你会想要检查和恢复功能从过去保存的经验:

if (localStorageAvailable()) {
    if (localStorage.DoNotShowMessageAgain && localStorage.DoNotShowMessageAgain === "true") {
        // user doesn't want to see the message again, so handle accordingly
    }
};

有关HTML5本地存储的更多信息，请查看我关于该主题的博客文章