如何添加“再次显示此消息”' localstorage复选框?

时间:2015-08-05 20:56:25

标签: javascript jquery twitter-bootstrap-3

我有一个引导警报。

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

1 个答案:

答案 0 :(得分:5)

我的建议是使用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本地存储空间的更多信息,请查看有关该主题的my blog post