实现本地存储数据的备份与恢复

在Vue待办应用中实现本地存储数据的备份与恢复，可以通过以下步骤完成。假设使用localStorage存储待办数据，备份与恢复功能可通过文件操作实现。

数据备份功能

备份功能将localStorage中的数据导出为JSON文件，供用户下载。

// 在Vue组件中定义备份方法
methods: {
  backupData() {
    const todos = localStorage.getItem('todos');
    if (!todos) {
      alert('没有可备份的数据');
      return;
    }

    const blob = new Blob([todos], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `todos-backup-${new Date().toISOString().slice(0, 10)}.json`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  }
}

数据恢复功能

恢复功能允许用户上传备份的JSON文件，并将其内容重新存入localStorage。

methods: {
  restoreData(event) {
    const file = event.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = (e) => {
      try {
        const data = JSON.parse(e.target.result);
        localStorage.setItem('todos', JSON.stringify(data));
        alert('数据恢复成功');
        // 可选：刷新应用状态
        this.$emit('data-restored');
      } catch (error) {
        alert('文件格式错误');
      }
    };
    reader.readAsText(file);
  }
}

界面集成

在Vue模板中添加备份和恢复按钮：

<template>
  <div>
    <button @click="backupData">备份数据</button>
    <label for="restore-file">
      <button>恢复数据</button>
      <input
        id="restore-file"
        type="file"
        accept=".json"
        @change="restoreData"
        style="display: none"
      />
    </label>
  </div>
</template>

注意事项

1. 备份文件默认保存为JSON格式，文件名包含当前日期。
2. 恢复功能会直接覆盖现有localStorage数据，建议添加确认提示。
3. 对于大型数据，可能需要添加加载状态提示。
4. 恢复操作完成后，可通过事件通知父组件刷新数据。

增强功能

1. 添加备份文件验证，确保文件格式正确。
2. 实现增量备份，仅备份新增或修改的数据。
3. 添加云存储备份选项，如集成Google Drive或Dropbox API。
4. 实现自动备份功能，定期保存数据快照。

通过以上方法，可以完整实现Vue待办应用的本地数据备份与恢复功能。