Shiny页面重载后保持Tab 2选中状态的问题求助

直接刷新页面会丢失当前选中的Tab状态，我们可以通过浏览器的localStorage临时保存当前Tab信息，页面重载后再读取该信息恢复Tab状态。以下是修改后的完整代码：

library(shiny)
library(shinyjs)

ui <- fluidPage(
  useShinyjs(),
  
  # 页面加载时自动恢复之前选中的Tab
  tags$script(HTML("
    $(document).ready(function() {
      // 读取localStorage中保存的Tab标识
      const savedTab = localStorage.getItem('activeTab');
      if (savedTab) {
        // 切换到保存的Tab
        $('#tabs a[href=\"#' + savedTab + '\"]').tab('show');
        // 可选：清除保存的状态，避免下次打开页面默认选中该Tab
        localStorage.removeItem('activeTab');
      }
    });
  ")),
  
  tabsetPanel(
    id = "tabs",  # 给tab容器添加ID，用于追踪当前Tab
    tabPanel("Tab 1", value = "tab1"),  # 给每个Tab指定唯一标识
    tabPanel("Tab 2", value = "tab2", 
             actionButton("mybutton", "Reload the page", 
                          onclick = "
                            // 获取当前激活的Tab标识并存入localStorage
                            const activeTab = $('#tabs .active').attr('href').substring(1);
                            localStorage.setItem('activeTab', activeTab);
                            // 执行页面重载
                            window.location.reload(true);
                          "))
  )
)

server <- function(input, output, session) {
  
}

shinyApp(ui = ui, server = server)

关键改动说明： #

• 给tabsetPanel添加id，同时给每个tabPanel指定value，确保能准确识别当前选中的Tab
• 点击重载按钮时，先将当前Tab的标识存入浏览器的localStorage，再执行刷新操作
• 页面加载完成后，读取localStorage中的Tab标识，自动切换到对应的Tab；如果不需要长期记住Tab状态，可以保留localStorage.removeItem来清除临时记录

内容的提问来源于stack exchange，提问作者PrettyClose