如何存储元素是否被选中，以便页面在刷新时记住它

How can I store whether an element is selected or not so the page will remember it upon refresh?

本文关键字：刷新 存储 何存储 元素 是否      更新时间：2023-09-26

我正在尝试调整一些代码，我们用于存储cookie中是否选中了复选框，以便在页面刷新时记住选中或取消选中了哪些框。问题是我尝试存储的新元素现在不是一个复选框，它基本上是一个图标，打开或关闭了一个类（"选定"），在其旁边放置了一个复选标记。这是切换功能：

//share - add class and check on click
$('.share-actions li a').click(function(e) {
    e.preventDefault();
    $(this).toggleClass('selected');
});

这是我正在尝试改编的饼干：

var $checkboxes;
// set the cookie
function setcookie() {
    var options= $checkboxes.map(function() {
        if (this.checked) return this.name;
    }).get().join(',');
    $.cookie('new_cookie', options);
}
$(function() {
    $checkboxes = $('input:checkbox').change(setcookie);
});
var alreadySetCookies = $.cookie('new_cookie').split(',');
for (var $cookie in alreadySetCookies) {
    $("input[name='" + alreadySetCookies[$cookie] + "']").attr("checked", "checked");
}
检测是否存在

selected类而不是已检查状态。对原始代码进行最少的更改。

事件处理程序：

$('.share-actions li a').click(function(e) {
    e.preventDefault();
    $(this).toggleClass('selected');
    setcookie();
});

和一般的cookie获取/设置代码：

var $checkboxes = $('.share-actions li a');
function setcookie() {
    var options = $checkboxes.map(function() {
        if ($(this).hasClass('selected')) return $(this).attr('id');
    }).get().join(',');
    $.cookie('new_cookie', options);
}
var alreadySetCookies = $.cookie('new_cookie').split(',');
alreadySetCookies.forEach(function(id) {
    $("#" + id).addClass('selected');
});

每个"复选框"都需要一个唯一的 ID 才能正常工作：

<ul class="share-actions">
    <li><a href="#" id="facebook">Facebook</a></li>
    <li><a href="#" id="twitter">Twitter</a></li>
    <li><a href="#" id="instagram">Instagram</a></li>
</ul>
相关文章：