Cordova应用点击返回按钮页面重载，JQuery修改内容丢失如何解决？

问题核心原因 #

Cordova默认采用多页面路由模式时，页面跳转后前一页的DOM和JS运行上下文会被销毁，返回时会重新加载页面资源，因此JQuery动态修改的DOM状态不会保留。

可行解决方案 #

• 方案1：改用单页应用(SPA)架构
  所有页面逻辑放在同一个HTML文件中，通过CSS的display: none/block或者JQuery的hide()/show()方法切换不同页面区块的可见性，不存在页面重载，所有DOM修改会自然保留。跳转逻辑可以替换为自定义方法，示例代码：

  // 跳转内部页
  function goToInnerPage() {
    $('#home-page').hide();
    $('#inner-page').show();
  }
  // 返回首页
  function backToHome() {
    $('#inner-page').hide();
    $('#home-page').show();
  }
  

  同时可以监听设备的返回键事件，自定义返回逻辑，避免系统默认的页面回退行为。

• 方案2：状态持久化+重载后恢复
  如果是现有多页项目改造成本过高，可以使用localStorage/sessionStorage存储首页的修改状态，返回首页时读取存储的状态重新渲染。示例代码：

  // 修改首页DOM时同步存储状态
  function updateHomeDom(key, value) {
    // 执行你的DOM修改逻辑
    $(`#${key}`).text(value);
    // 存储状态
    localStorage.setItem(`home_status_${key}`, value);
  }
  // 首页初始化时读取存储的状态恢复
  $(document).ready(function() {
    Object.keys(localStorage).forEach(key => {
      if(key.startsWith('home_status_')) {
        const domKey = key.replace('home_status_', '');
        $(`#${domKey}`).text(localStorage.getItem(key));
      }
    })
  })
  

  也可以在Cordova的config.xml中添加如下配置，调整页面加载缓存策略减少重复加载：

  <preference name="AndroidInsecureFileModeEnabled" value="true" />
  <preference name="AllowFileAccess" value="true" />
  

• 方案3：使用路由插件实现页面保活
  可以使用Cordova官方的路由管理类插件，配置页面栈的保活逻辑，避免返回时销毁首页实例，无需修改原有页面结构。

推荐优先级 #

优先选用方案1，改动量最小且兼容性最好，是Cordova应用开发的主流实现模式；现有多页项目可直接选用方案2快速修复。

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