如何通过localStorage持久化WordPress动态按钮的隐藏状态？

你的代码已经实现了点击隐藏其他按钮的功能，但缺少记录选中按钮唯一标识和页面加载时恢复状态的逻辑，所以刷新后状态会丢失。下面是修改后的完整方案：

核心思路 #

1. 点击按钮时，记录当前选中按钮的唯一标识（比如索引或按钮自带的专属属性）到localStorage
2. 页面加载完成后，读取localStorage中的标识，自动恢复对应的按钮显示状态

修改后的代码 #

// 页面加载时恢复之前保存的状态
$(document).ready(function() {
    // 读取localStorage中保存的选中按钮索引
    const selectedIndex = localStorage.getItem('selectedButtonIndex');
    if (selectedIndex !== null) {
        const $buttons = $('.dce-button');
        // 显示选中的按钮，隐藏其余按钮
        $buttons.eq(selectedIndex).removeClass('noDisplay');
        $buttons.not($buttons.eq(selectedIndex)).addClass('noDisplay');
        // 给选中按钮设置data-id（保留你原有逻辑）
        $buttons.eq(selectedIndex).attr('data-id', 'Next');
    }
});

// 按钮点击事件处理
$('.dce-button').click(function(event) {
    const $this = $(this);
    const $buttons = $('.dce-button');
    // 获取当前按钮在所有.dce-button中的索引作为唯一标识
    const index = $buttons.index($this);
    
    // 将选中按钮的索引存入localStorage
    localStorage.setItem('selectedButtonIndex', index);
    
    // 执行显示当前按钮、隐藏其他按钮的逻辑
    $this.attr('data-id', 'Next');
    $buttons.not($this).addClass('noDisplay');
    $this.removeClass('noDisplay'); // 确保当前按钮处于显示状态
});

关键补充说明 #

• 更可靠的唯一标识：如果你的动态按钮自带专属属性（比如data-button-id），可以把索引替换成$this.data('button-id')，这样即使按钮顺序变化，状态也不会出错
• CSS样式确保：你的noDisplay类需要对应基础样式，否则隐藏逻辑不生效：

.noDisplay {
    display: none !important;
}

• 状态重置：如果需要允许用户恢复初始状态，可以添加重置按钮，点击时执行localStorage.removeItem('selectedButtonIndex')并刷新页面

内容的提问来源于stack exchange，提问作者Jey Mhin Ho