Shiny中Cookie设置删除异常及合并按钮需求问询

一、问题分析 #

1. 异常根源：原代码存在重复的observeEvent(input$save, ...)逻辑块，易引发逻辑混乱；同时使用的js-cookie预览版本可能存在兼容性问题，导致Cookie数据异常覆盖。
2. 需求落地：将分散的保存/删除按钮合并为单个按钮，实现一键处理名字、姓氏的Cookie操作（仅保存非空输入内容）。

二、修复后的完整代码 #

1. script.js 文件 #

// Cookie操作核心函数
function getCookies() {
  var res = Cookies.get();
  // 强制触发输入值更新，避免数据延迟或混淆
  Shiny.setInputValue('cookies', res, {priority: 'event'});
}

// 批量设置Cookie（仅保存非空值）
Shiny.addCustomMessageHandler('cookie-set', function(msg) {
  Object.keys(msg).forEach(function(key) {
    if (msg[key] !== "") {
      Cookies.set(key, msg[key]);
    }
  });
  getCookies();
});

// 批量删除指定Cookie
Shiny.addCustomMessageHandler('cookie-remove', function(msg) {
  msg.forEach(function(key) {
    Cookies.remove(key);
  });
  getCookies();
});

// 页面初始化与输入框填充
$(document).on('shiny:connected', function(ev) {
  getCookies();
  // 根据Cookie数据自动填充输入框
  Shiny.addCustomMessageHandler('fill-inputs', function(cookies) {
    $('#name_set').val(cookies.name || '');
    $('#name_set2').val(cookies.name2 || '');
  });
});

2. app.R 文件 #

library(shiny)

addResourcePath("www", "www")

ui <- fluidPage(
  tags$head(
    tags$script(
      src = paste0(
        "https://cdn.jsdelivr.net/npm/js-cookie@3.0.5/",
        "dist/js.cookie.min.js"
      )
    ),
    tags$script(src = "www/script.js")
  ),
  textInput("name_set", "你的名字："),
  textInput("name_set2", "你的姓氏："),
  actionButton("save_all", "保存所有已填写内容", style="background-color: lightblue;"),
  actionButton("remove_all", "清除所有保存内容", style="background-color: lightcoral;"),
  br(), br(),
  h3("已保存的信息："),
  uiOutput("saved_names")
)

server <- function(input, output, session){
  
  # 页面加载时自动填充输入框
  observeEvent(input$cookies, {
    session$sendCustomMessage("fill-inputs", input$cookies)
  }, ignoreNULL = FALSE)
  
  # 一键保存非空输入的Cookie
  observeEvent(input$save_all, {
    save_data <- list(
      name = input$name_set,
      name2 = input$name_set2
    )
    session$sendCustomMessage("cookie-set", save_data)
  })
  
  # 一键清除所有相关Cookie
  observeEvent(input$remove_all, {
    session$sendCustomMessage("cookie-remove", c("name", "name2"))
  })
  
  # 动态展示已保存的信息
  output$saved_names <- renderUI({
    items <- list()
    if (!is.null(input$cookies$name) && input$cookies$name != "") {
      items <- c(items, p("名字：", input$cookies$name))
    }
    if (!is.null(input$cookies$name2) && input$cookies$name2 != "") {
      items <- c(items, p("姓氏：", input$cookies$name2))
    }
    if (length(items) == 0) {
      items <- p("暂无保存的信息")
    }
    items
  })
  
}

shinyApp(ui, server)

三、关键改进点 #

• 异常修复：替换js-cookie为稳定版本，添加输入值更新优先级配置，彻底解决Cookie数据异常覆盖问题。
• 功能合并：单个保存按钮仅处理非空输入的Cookie，单个删除按钮一键清除所有相关Cookie，简化操作流程。
• 体验优化：页面加载时自动将Cookie数据填充到对应输入框，无需用户手动输入历史内容。
• 展示升级：统一展示已保存的信息，无数据时显示友好提示，提升界面可读性。

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