在本地存储中设置对象数组 - TypeScript

在 TypeScript 程序中，有时需要在浏览器本地存储中保存对象数组。本地存储是一种在浏览器中保存数据的机制，可以在关闭浏览器后仍然保留数据。 TypeScript 提供了局部存储和会话存储的 API，可以用来在浏览器中存储和获取数据。

局部存储和会话存储

在 TypeScript 中，局部存储和会话存储是使用 LocalStorage 和 SessionStorage 对象来实现的。 LocalStorage 用于在浏览器关闭后仍然保留数据的持久存储，而 SessionStorage 则用于在同一浏览器会话期间保留数据的临时存储。

// 设置局部存储数据
localStorage.setItem(key, value);

// 获取局部存储数据
localStorage.getItem(key);

// 设置会话存储数据
sessionStorage.setItem(key, value);

// 获取会话存储数据
sessionStorage.getItem(key);

存储对象数组

要在本地存储中存储对象数组，需要将数组转换为 JSON 字符串，然后再存储到本地存储中。同样，从本地存储中获取对象数组时，需要将 JSON 字符串转换为对象数组。

// 定义 Employee 类
class Employee {
  constructor(public id: number, public name: string, public age: number) {}
}

// 将 Employee 对象数组存储到本地存储中
const employees: Employee[] = [
  new Employee(1, '张三', 20),
  new Employee(2, '李四', 22),
  new Employee(3, '王五', 24),
];

localStorage.setItem('employees', JSON.stringify(employees));

// 从本地存储中获取 Employee 对象数组 
const employeesString = localStorage.getItem('employees');
const employeesJSON = employeesString != null ? JSON.parse(employeesString) : null;
const employeesFromLocalStorage: Employee[] = [];

if (employeesJSON != null && employeesJSON.length > 0) {
  employeesJSON.forEach((emp: any) => {
    employeesFromLocalStorage.push(new Employee(emp.id, emp.name, emp.age));
  });
}

在上面的例子中，我们定义了一个 Employee 类，其中包含 id、name 和 age 属性。然后我们定义了一个 Employee 对象数组，并将它存储到本地存储中。为了将 Employee 对象数组存储到本地存储中，我们必须将它先转换为 JSON 字符串。同样，从本地存储中获取 Employee 对象数组时，我们必须将 JSON 字符串转换为对象数组，并将每个对象转换为 Employee 类的实例。