onchange刷新致修改内容丢失：添加新onchange时如何保存修改？

浏览器刷新后会重置页面到初始状态，要保存用户修改的内容，核心是把数据存在浏览器本地，常用方案是localStorage（持久化保存，关闭浏览器也不会丢）或sessionStorage（仅当前会话有效，关闭浏览器清除）。以下是针对你代码的具体修改方案：

1. 调整JavaScript代码，添加保存/恢复逻辑 #

// 保存值到本地存储
function saveValue(key, value) {
  localStorage.setItem(key, value);
}

// 从本地存储读取值
function restoreValue(key) {
  return localStorage.getItem(key) || '';
}

function information(ele){
  var address1 = document.getElementsByClassName('test2');
  for(var i=0; i<address1.length; i++){
    let val = '';
    if( ele.value == "test4"){
      val = "test5";
    } else if (ele.value == "test6"){
      val = "test7";
    } else if (ele.value == "test8"){
      val = "test9";
    }
    address1[i].value = val;
    // 同步保存设置后的地址值
    saveValue(address1[i].name, val);
  }
  // 保存当前名称输入框的值
  saveValue(ele.name, ele.value);
}

// 页面加载时自动恢复所有表单值
window.addEventListener('load', function() {
  // 恢复名称输入框
  const nameInput = document.querySelector('input[name="dates-full.names"]');
  nameInput.value = restoreValue(nameInput.name);
  // 如果名称输入框有值，自动同步地址
  if(nameInput.value) {
    information(nameInput);
  }
  
  // 恢复地址输入框
  const addressInputs = document.getElementsByClassName('test2');
  for(var i=0; i<addressInputs.length; i++){
    addressInputs[i].value = restoreValue(addressInputs[i].name);
  }
});

2. 修改HTML，添加实时保存事件 #

给输入框加上oninput事件，实时保存用户手动修改的内容：

<div class="form grup information">
  <label for="dates-full.names"> Names full</label>
  <input name="dates-full.names" list="dates-full.names" type="text"
    class="form grup test1" onchange="information(this)" oninput="saveValue(this.name, this.value)">
  <datalist type="text" id="dates-full.names">
    <option value="test4">
    <option value="test6">
    <option value="test8">
  </datalist>
</div>


<div class="form grup test2">
  <label for="power-full.adress"> Adress full</label>
  <input id="test2" name="dates-full.adress" list="dates-full.adress" type="text"
  class="form grup test2" oninput="saveValue(this.name, this.value)">
  <datalist type="text" id="dates-full.adress">
    <option value="test5">
    <option value="test7">
    <option value="test9">
  </datalist>
</div>

关键说明 #

• 用输入框的name属性作为存储的键，确保每个输入框的值对应唯一的存储项
• oninput事件比onchange更及时，用户输入过程中就会保存，避免失去焦点前刷新丢失内容
• 如果不需要持久化数据，把代码里的localStorage换成sessionStorage即可

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