点击后浏览器本地保存状态：Bingo站点localStorage实现问询

核心思路 #

利用localStorage存储已选中数字的数组（localStorage仅支持字符串存储，因此用JSON格式完成数组的序列化/反序列化），页面加载时读取数据恢复选中状态，点击按钮时同步更新存储数据。

修正原代码的小问题 #

原代码中Math.random(1,90)是错误用法，Math.random()本身无参数，返回0（包含）到1（不包含）的随机数，正确生成1-90随机数的写法是：

random_number = Math.floor(Math.random() * 90) + 1;

完整实现代码 #

// 页面加载时恢复之前的选中状态
$(document).ready(function() {
    // 从localStorage读取已选中数字，无数据则初始化空数组
    let selectedNumbers = JSON.parse(localStorage.getItem('bingoSelectedNumbers')) || [];
    // 给已选中数字对应的div添加标记类
    selectedNumbers.forEach(num => {
        $(`.${num}`).addClass('box1');
    });
});

$('.new_number').click(function(){
    // 生成1-90的随机数
    const random_number = Math.floor(Math.random() * 90) + 1;
    const $targetBox = $(`.${random_number}`);
    // 切换选中类名
    $targetBox.toggleClass('box1');
    
    // 更新localStorage中的选中数据
    let selectedNumbers = JSON.parse(localStorage.getItem('bingoSelectedNumbers')) || [];
    const numIndex = selectedNumbers.indexOf(random_number);
    if (numIndex !== -1) {
        // 数字已存在，从选中列表移除
        selectedNumbers.splice(numIndex, 1);
    } else {
        // 数字未选中，加入选中列表
        selectedNumbers.push(random_number);
    }
    // 将数组转为JSON字符串存回localStorage
    localStorage.setItem('bingoSelectedNumbers', JSON.stringify(selectedNumbers));
});

关键逻辑说明 #

• 初始化恢复：页面加载时读取localStorage里的bingoSelectedNumbers字段，解析为数组后遍历给对应数字的div加上选中类名。
• 点击同步：每次生成随机数后，判断该数字是否在选中数组中：
  • 若已存在（类名被移除），则从数组中删除该数字；
  • 若不存在（类名被添加），则将数字加入数组；
• 存储格式处理：用JSON.stringify()将数组转为字符串存储，读取时用JSON.parse()转回数组，解决localStorage无法直接存储数组的问题。

内容的提问来源于stack exchange，提问作者Karsten Løgstrup