JavaScript点击表单提交按钮后页面重置数据丢失日志清空如何解决？

放在<form>标签内部的<button>默认type属性值为submit，点击后会触发表单默认提交行为，导致页面重新加载，JS运行环境完全重置，因此你存在内存里的数组数据、控制台打印的日志都会被清空。

你可以选择任意一种方案解决：

• 方案1：明确指定按钮类型为普通按钮
  修改HTML中提交按钮的代码，添加type="button"属性，从根源上避免触发提交行为：

<button type="button" id="form_submit" name="form_submit">submit</button>
<!-- 建议同时给清空按钮也添加type属性，避免点击清空时也触发提交 -->
<button type="button" id="form_out" name="form_out">clear</button>

• 方案2：在事件函数中阻止默认提交行为
  在add_new_contact函数的最开头添加阻止默认行为的代码，该方案的优势是可以保留表单原生的required、pattern格式校验能力：

function add_new_contact(e) {
  e.preventDefault(); // 新增这一行即可
  // 你原有函数的剩余代码不变
}

• 方案3：替换form标签为普通容器
  如果你不需要用到表单自带的任何原生能力，可以直接把外层的<form>标签替换为<div>标签，也不会再触发默认提交刷新。

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