Angular 本地存储传递多个值答案

【问题标题】：Angular Local storage passing multiple valuesAngular 本地存储传递多个值
【发布时间】：2021-06-29 01:03:07
【问题描述】：

我在我的项目中使用Angular Local Storage。在localStorage.setItem 我试图将多个值存储为第二个参数

例如 - 而不是将 rec 存储为第二个参数

localStorage.setItem('Data', JSON.stringify(rec));

我想存储以下值。我怎样才能做到这一点？

 this.firstName = data!.data2;
 this.middleName = data!.data3;
 this.lastName = data!.data1;

下面是我的功能

updateTheAmazonFields(rec: Data, new_value: HTMLTableDataCellElement) {
  const { data1, data2, data3} = rec;
  this.records.replaceAndGetNewRec({target_ui, data1, data3, data2}).subscribe(data => {
  this.processIncomingRecord(data);

// want to store following values
      this.firstName = data!.data2;
      this.middleName = data!.data3;
      this.lastName = data!.data1;


  localStorage.setItem('Data', JSON.stringify(rec)); ---->>>>> Here


  })

【问题讨论】：

标签： angular typescript local-storage

【解决方案1】：

你可以试试

localStorage.setItem('data_1', JSON.stringify(this.firstName));
localStorage.setItem('data_2', JSON.stringify(this.middleName));
localStorage.setItem('data_3', JSON.stringify(this.lastName));

【讨论】：

我没有收到任何错误，没有数据。我正在使用本地存储来实现后退按钮功能。当我按下后退按钮时，以前的数据是空的
这很奇怪。您是否尝试在控制台上记录数据以检查是否从后端正确检索数据？
是的，正在检索数据，只是检查日志

【解决方案2】：

因此，本地存储保存键/值对。您不想更改密钥，而是使用密钥存储对象。这是你应该做的：

const data = {
              firstName: this.firstName, 
              middleName: this.middleName,
              lastName: this.lastName
              }
localStorage.setItem('data', JSON.stringify(data));

每次您使用此键设置项目时，数据都会被新的替换。使用 getItem，您可以获得值：

const data = JSON.parse(localStorage.getItem('key'));
console.log(data.firstName);

【讨论】：