如何在 javascript 的信息窗口中使用 cookie 保存复选框状态

How to save checkbox state using cookies in an infowindow in javascript?

本文关键字：cookie 保存 状态 复选框 窗口 javascript 信息窗 信息      更新时间：2023-09-26

我有多个标记，这些标记在窗口加载时加载，我正在为每个信息窗口动态创建数据。

标记的所有信息窗口都包含复选框。如何保存复选框的状态，然后在单击信息窗口时显示状态（单击标记时还应加载信息窗口中的数据）。

看看document.cookie，这应该可以解决你的问题。这是我使用的： 

// CLASS LocalStorage
function LocalStorage()
{
}
LocalStorage.prototype.AsObj = function() {
    var obj = {};
    var arr = document.cookie.split("; ");
    for(var i = 0; i < arr.length; i++)
    {
        var tmp = arr[i].split("=");
        obj[tmp[0]] = tmp[1];
    }
    return obj;
};
LocalStorage.prototype.AddCookie = function(key, val) {
    document.cookie = key + '=' + val;
};
LocalStorage.prototype.RemoveCookie = function(key) {
    document.cookie = key + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT;'
};

请注意，这段代码并不完美，我的javascript不能完全称为好。

我建议你使用HTML5 Web Storage：

为每个复选框指定一个唯一的 ID （HTML）： 

<input class="checkbox" type="checkbox" data-box-id="###">

如果选中/取消选中复选框，请将其保存在 LocalStorage （jQuery） 中：

$('.checkbox').change(function(){
    var chckd = this.checked ? 'true' : 'false';
    var index = $(this).data('box-id');
    localStorage.setItem(index, chckd);
});

在文档加载时或在需要时，从 LocalStorage 加载复选框并选中它们 （jQuery）：

$(function() {
    $('.checkbox').each(function(){
        var index = $(this).data('box-id');
        if (localStorage.getItem(index) == 'true') {
            $(this).prop('checked', true);
        } else {
            $(this).prop('checked', false);
        }
    });    
});

你也可以用 cookie 来做到这一点，但我认为这需要一个 jQuery 的插件......

我正在尝试解决同样的问题。我的脚本根据复选框隐藏列，但每次重新加载页面时，它都会再次显示列。

如何添加饼干？ 

    $(function () {
        var $chk = $("#grpChkBox input:checkbox"); 
        var $tbl = $("#register");
        var $tblhead = $("#register th");
        $chk.prop('checked', true); 

        $chk.click(function () {
            var colToHide = $tblhead.filter("." + $(this).attr("name"));
            var index = $(colToHide).index();
            $tbl.find('tr :nth-child(' + (index + 1) + ')').toggle();

        });
    });
</script>

复选框代码：

 <div id="grpChkBox">
    <p><input type="checkbox" name="nabavna"/> NC</p>

相关文章：