Shiny中如何实现页面刷新后保留用户已输入的内容？

Shiny默认状态下页面刷新会重置所有输入组件为初始值，要实现刷新后保留上次输入内容，直接借助浏览器本地存储（localStorage）做前端缓存即可，不需要额外搭建后端存储服务，实现成本很低。

实现逻辑 #

• 页面初始化、和Shiny服务建立连接时，自动读取浏览器本地缓存里之前存的输入值，回填到对应的输入组件
• 实时监听输入组件的内容变化，用户每次输入都把最新值同步存到浏览器本地缓存，刷新页面时缓存不会被清空
• 服务端逻辑不需要做大幅改动，和原有写法保持一致即可

可运行完整代码 #

library(shiny)

## Only run examples in interactive R sessions
if (interactive()) {
  
  ui <- fluidPage(
    # 嵌入自定义JS处理本地存储读写
    tags$script(HTML("
    $(document).on('shiny:connected', function() {
      // 读取本地存储的历史输入
      const savedVal = localStorage.getItem('user_caption');
      // 存在历史值就回填到输入框
      if (savedVal !== null) {
        Shiny.setInputValue('caption', savedVal);
      }
      // 监听输入变化，实时更新本地存储
      $('#caption').on('input propertychange', function() {
        localStorage.setItem('user_caption', $(this).val());
      })
    })
    ")),
    textInput("caption", "Caption", "Data Summary"),
    verbatimTextOutput("value")
  )
  server <- function(input, output) {
    output$value <- renderText({ input$caption })
  }
  shinyApp(ui, server)
}

补充说明 #

该方案的存储数据保存在用户当前使用的浏览器本地，不同浏览器、不同设备之间的缓存不互通。如果需要清除留存的输入记录，既可以在代码里加触发逻辑调用localStorage.removeItem('user_caption')清除指定项，也可以由用户手动清除浏览器缓存实现。
如果页面有多个输入组件需要留存，只需要给每个输入组件补一套对应的读缓存、监听写入缓存的逻辑即可，写法和上面的示例完全一致。

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