如何让JavaScript变量经函数修改后持久保存并实时更新数据

实现思路 #

• 用sessionStorage做临时存储：它的生命周期与当前浏览器标签页绑定，页面刷新不会丢失数据，关闭标签页后自动销毁，完全符合你要求的「页面关闭前始终保留修改值」的需求
• 抽离公共渲染函数：所有参数修改后统一调用该函数更新页面所有关联内容，保证数据一致性，实现实时更新

修改后的完整代码 #

HTML #

<h1>y = (<span id="count">1</span><button onclick="plusOne()">Rise</button></h1>
<h2> / <span id="count2">1</span><button onclick="plusRun()">Run</button>) x + </h2>
<h3><span id="count3">0</span><button onclick="plusB()">b</button></h3>
<!-- 可选：添加完整函数实时展示区域 -->
<div style="margin-top: 20px; font-size: 20px;">
  当前函数：<span id="full-function"></span>
</div>

JavaScript #

// 初始化参数：优先从sessionStorage取，没有就用默认值
let rise = Number(sessionStorage.getItem('rise')) || 1;
let run = Number(sessionStorage.getItem('run')) || 1;
let b = Number(sessionStorage.getItem('b')) || 0;

// 公共页面更新函数：所有参数修改后都调用这个方法更新页面
function updatePage() {
  // 更新三个参数的显示
  document.getElementById('count').textContent = rise;
  document.getElementById('count2').textContent = run;
  document.getElementById('count3').textContent = b;
  // 更新完整函数显示（对应上面的可选区域）
  document.getElementById('full-function').textContent = `y = (${rise}/${run})x + ${b}`;
}

// 页面加载完成后先执行一次更新，把存储的参数渲染到页面
window.onload = updatePage;

function plusOne() {
  rise++;
  if (rise > 9) {
    rise = 1;
  }
  // 把新值存到sessionStorage
  sessionStorage.setItem('rise', rise);
  // 更新页面
  updatePage();
}
  
function plusRun() {
  run++;
  if (run > 9) {
    run = 1;
  }
  sessionStorage.setItem('run', run);
  updatePage();
}

function plusB() {
  b++;
  if (b > 9) {
    b = -9;
  }
  sessionStorage.setItem('b', b);
  updatePage();
}

额外说明 #

如果你需要永久保存参数（哪怕关闭浏览器再打开也保留），把代码里所有的sessionStorage替换成localStorage即可。

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