如何在函数内永久更新全局变量contacts，避免页面刷新后数据丢失？

当前你的contacts数组是存在内存中的临时变量，页面刷新时浏览器会重新加载脚本，数组会被重置为初始值，所以新增的数据会消失。要实现永久修改，必须把数据存储到持久化介质中，下面分场景给出解决方案：

前端场景：用浏览器本地存储（localStorage） #

如果只是前端单页应用，不需要后端参与，可以用浏览器提供的localStorage来存数据，数据会保存在用户浏览器中，刷新或重启浏览器都不会丢失。

修改后的contacts.js代码 #

// 初始化时优先从localStorage读取，没有则用默认数据
let contacts = JSON.parse(localStorage.getItem('contacts')) || [
  {id: 1, first: "joe", last: "smith"}, 
  {id: 2, first: "matt", last: "smith"}
];

export async function getContacts() {
  console.log(contacts);
  return contacts;
}

export async function createContact() {
  const newContact = {
    id: contacts.length + 1,
    first: "",
    last: ""
  };
  
  contacts.push(newContact);
  // 每次修改后同步到localStorage
  localStorage.setItem('contacts', JSON.stringify(contacts));
  
  return contacts.length; // push返回新数组长度，直接返回即可
}

关键改动说明 #

• 初始化逻辑：先尝试从localStorage读取数据，没有的话才用默认数组
• 修改后同步：每次更新contacts数组后，立刻把数组转成JSON字符串存回localStorage（因为localStorage仅支持存储字符串）
• 简化冗余代码：直接操作全局contacts，不用额外awaitgetContacts

全栈场景：用后端数据库 #

如果你的应用有后端服务，更可靠的方式是把数据存在服务器端的数据库（比如MongoDB、MySQL），前端通过API接口读写数据：

• 新增联系人时，调用后端的创建接口，把数据存入数据库
• 获取联系人时，调用后端的查询接口，从数据库拉取最新数据
• 这种方式数据存在服务器，不会因为用户清除浏览器缓存而丢失，还能支持多用户共享数据

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