迁移VSCode通讯录项目至新电脑后，遇Uncaught type error及数据丢失求助

一、先修复「Cannot read properties of null (reading 'push')」报错 #

这个报错的核心是你代码里尝试对null执行push方法——新电脑的浏览器localStorage里没有之前存储的联系人数据，读取时直接返回了null。

直接改代码就行，在读取localStorage数据的地方加判空处理，确保拿到的是数组：

// 替换原来直接读取的代码
let contacts = JSON.parse(localStorage.getItem('contacts')) || [];
// 之后再执行push操作就不会报错了
contacts.push(newContact);
localStorage.setItem('contacts', JSON.stringify(contacts));

这样如果localStorage里没数据，会默认用空数组，避免null调用push的错误。

二、找回丢失的联系人数据 #

localStorage是浏览器本地存储，数据只存在旧电脑的对应浏览器里，和VSCode项目文件夹没关系，迁移项目自然带不过去。找回数据分两种情况：

• 还能碰旧电脑：打开旧电脑上跑过这个应用的浏览器，按F12开开发者工具→找「Application」（部分浏览器叫「存储」）标签→展开「Local Storage」→找到对应域名下的contacts项，复制它的value值，然后在新电脑的浏览器同一位置粘贴，刷新页面就能恢复数据。
• 没法碰旧电脑：数据已经找不回来了，只能重新录入，但可以通过后续措施避免再踩坑。

三、后续预防措施 #

• 加数据导出功能：在应用里加个按钮，点击就能把联系人数据导出成JSON文件，方便迁移或备份。示例代码：

function exportContacts() {
  const contacts = JSON.parse(localStorage.getItem('contacts')) || [];
  const blob = new Blob([JSON.stringify(contacts, null, 2)], {type: 'application/json'});
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'contacts-backup.json';
  a.click();
  URL.revokeObjectURL(url);
}

• 加数据导入功能：对应导出，支持导入JSON文件恢复数据，换设备时直接导入就行：

function importContacts(event) {
  const file = event.target.files[0];
  if (!file) return;
  const reader = new FileReader();
  reader.onload = function(e) {
    try {
      const contacts = JSON.parse(e.target.result);
      if (Array.isArray(contacts)) {
        localStorage.setItem('contacts', JSON.stringify(contacts));
        alert('导入成功');
        // 这里可以加刷新页面或重新渲染联系人列表的逻辑
      } else {
        alert('导入文件格式错误');
      }
    } catch (err) {
      alert('导入失败：文件不是有效的JSON');
    }
  };
  reader.readAsText(file);
}

• 考虑云端同步：如果经常换设备，可以把数据同步到后端接口，彻底解决跨设备数据丢失的问题。

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