AdminLte跳转页面后自定义配置丢失，如何持久保存自定义状态

核心实现逻辑是将用户调整后的配置状态存储到本地存储（或后端用户数据），每次页面加载时主动读取存储的配置并应用到页面上，具体实现步骤如下： #

步骤1：监听配置变更事件，同步保存状态 #

AdminLTE的内置组件状态变更时会触发对应事件，你可以统一监听这些事件，将当前所有自定义配置序列化后存入localStorage：

// 监听所有常用配置的变更事件
$('body').on('collapsed.lte.pushmenu shown.lte.pushmenu darkmode.lte.darkmode toggled.lte.controlsidebar collapsed.lte.sidebar compact.lte.sidebar', function () {
  // 收集当前所有配置状态
  const userConfig = {
    darkMode: $('body').hasClass('dark-mode'),
    sidebarCollapsed: $('body').hasClass('sidebar-collapse'),
    sidebarCompact: $('body').hasClass('sidebar-compact'),
    controlSidebarOpened: $('body').hasClass('control-sidebar-slide-open')
    // 其他自定义配置项可按相同格式补充
  }
  // 存储到本地持久化
  localStorage.setItem('adminlte_user_config', JSON.stringify(userConfig))
})

步骤2：页面初始化时读取并应用存储的配置 #

页面DOM加载完成后，先读取本地存储的配置，再将对应状态应用到页面：

$(function () {
  // 读取存储的配置，无存储记录则跳过
  const savedConfig = localStorage.getItem('adminlte_user_config')
  if (!savedConfig) return
  const userConfig = JSON.parse(savedConfig)
  
  // 逐个应用配置
  userConfig.darkMode && $('body').addClass('dark-mode')
  userConfig.sidebarCollapsed && $('body').addClass('sidebar-collapse')
  userConfig.sidebarCompact && $('body').addClass('sidebar-compact')
  userConfig.controlSidebarOpened && $('body').addClass('control-sidebar-slide-open')
  // 其他配置项按相同逻辑补充应用逻辑即可
})

补充说明 #

• 如果需要实现跨设备的配置同步，可以把配置数据同步存储到后端用户接口，页面加载时先拉取用户的云端配置再应用，配置变更时同时调用接口同步到云端即可。
• 如果希望配置仅在当前浏览器会话生效，关闭浏览器后自动清除，可以把存储介质从localStorage替换为sessionStorage。
• 上述代码需要在AdminLTE核心JS加载完成后执行，避免出现事件监听失败、状态应用不生效的问题。

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