Angular服务中CSV数据为何丢失？页面刷新后数据清空

嘿，这个问题我太熟了——Angular服务里的数据在页面刷新后丢失是个非常常见的坑，我来给你拆解下原因，再分享几个靠谱的解决方案：

Angular的服务默认是单例，但这个单例只存活在当前应用的会话周期里。当你刷新页面时，整个Angular应用会重新加载，所有服务都会被重新实例化，之前存在服务里的csv数据自然就被清空了——相当于你重启了整个应用，内存里的临时数据全没了。

解决方案1：用浏览器存储持久化数据（最常用） #

最简单的办法就是把CSV数据存在localStorage或者sessionStorage里，这样即使页面刷新，数据还保存在浏览器的本地存储中。你只需要修改你的csvDataService，在保存和读取数据的时候加上存储逻辑就行：

修改csvDataService的示例代码： #

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class CsvDataService {
  private readonly STORAGE_KEY = 'saved_csv_data';
  private csvData: any = null;

  constructor() {
    // 应用加载时先从存储读取数据
    const savedData = localStorage.getItem(this.STORAGE_KEY);
    this.csvData = savedData ? JSON.parse(savedData) : null;
  }

  saveCSV(csv: any) {
    // 同时存在服务内存和本地存储
    this.csvData = csv;
    localStorage.setItem(this.STORAGE_KEY, JSON.stringify(csv));
  }

  getCSV(): any {
    return this.csvData;
  }
}

• 用localStorage的话，数据会一直存在浏览器里，直到用户手动清除；如果希望关闭浏览器就自动清空数据，换成sessionStorage即可。
• 注意：localStorage有容量限制（一般是5MB左右），如果你的CSV数据特别大，这个方案可能不适用。

解决方案2：通过路由传递数据（适合小量数据） #

如果你的CSV数据体量不大，可以在跳转到/map路由的时候，把数据作为路由参数传过去。不过要注意，路由参数会显示在URL里，所以敏感数据千万别用这个方法：

修改上传组件的跳转逻辑： #

// 上传组件中的跳转代码
this.router.navigate(['/map'], {
  queryParams: { csv: JSON.stringify(csv) }
});

在map组件中读取数据： #

import { ActivatedRoute } from '@angular/router';
import { CsvDataService } from '../services/csv-data.service';

constructor(
  private route: ActivatedRoute,
  private csvDataService: CsvDataService
) {}

ngOnInit() {
  this.route.queryParams.subscribe(params => {
    if (params['csv']) {
      const csvData = JSON.parse(params['csv']);
      // 把数据存回服务或者直接使用
      this.csvDataService.saveCSV(csvData);
    }
  });
}

这个方法的缺点是URL会变长，而且数据量不能太大，否则会超出URL的长度限制。

解决方案3：用IndexedDB存储大数据 #

如果你的CSV数据非常大（超过5MB），localStorage满足不了需求，可以用IndexedDB——这是浏览器提供的一个异步本地数据库，支持存储大量结构化数据。Angular里也有像dexie.js这样的库可以简化操作，不过这个方案相对复杂一点，适合数据量较大的场景。

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