Angular 6:将数据保存到本地存储

Question

我有一个数据表,显示来自外部API的数据,我希望表页面上的items/element数量应该保存在本地存储中

这是我到目前为止所尝试的:

 ngOnInit() {
  this.moviesService.getPopularTVShows().subscribe(res => {
    this.dataSource = new MatTableDataSource(res.results);
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
    localStorage.setItem(this.dataSource, this.dataSource.length);
    console.log(localStorage.length);
  });
}

当我运行我的应用程序时,控制台显示 undefined

我的代码出了什么问题？欢迎任何帮助或建议,新手尝试新的东西.

Answer 1

您应该在将数据存储到本地存储时定义密钥名称,该存储应该是字符串,值应该是字符串

 localStorage.setItem('dataSource', this.dataSource.length);

要打印,你应该使用getItem

console.log(localStorage.getItem('dataSource'));

Answer 2

您可以使用 localStorage 来存储 json 数据：

示例如下：-

let JSONDatas = [
    {"id": "Open"},
    {"id": "OpenNew", "label": "Open New"},
    {"id": "ZoomIn", "label": "Zoom In"},
    {"id": "ZoomOut", "label": "Zoom Out"},
    {"id": "Find", "label": "Find..."},
    {"id": "FindAgain", "label": "Find Again"},
    {"id": "Copy"},
    {"id": "CopyAgain", "label": "Copy Again"},
    {"id": "CopySVG", "label": "Copy SVG"},
    {"id": "ViewSVG", "label": "View SVG"}
]

localStorage.setItem("datas", JSON.stringify(JSONDatas));

let data = JSON.parse(localStorage.getItem("datas"));

console.log(data);

Answer 3

当使用 Angular 时，你最好编写一个服务来帮助你测试和模拟本地存储：

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

@Injectable({
  providedIn: 'root'
})
export class LocalStorageService {

  setItem(key: string, value: any) {
    localStorage.setItem(key, value);
  }

  getItem(key: string): any {
    return localStorage.getItem(key);
  }

  setBool(key: string, value: boolean) {
    localStorage.setItem(key, String(value));
  }

  getBool(key: string): boolean {
    return localStorage.getItem(key) === 'true';
  }

  setObject(key: string, value: object) {
    localStorage.setItem(key, JSON.stringify(value));
  }

  getObject(key: string): object {
    return JSON.parse(localStorage.getItem(key));
  }
}

茉莉花集成测试：

import { TestBed } from '@angular/core/testing';

import { LocalStorageService } from './local-storage.service';

describe('LocalStorageService', () => {
  let service: LocalStorageService;

  beforeEach(() => {
    TestBed.configureTestingModule({});
    service = TestBed.inject(LocalStorageService);
  });


  it('should read and write a string', () => {
    const key = 'my_key';
    const value = 'my_value';

    service.setItem(key, value);

    expect(service.getItem(key)).toEqual(value);
  });

 it('should read and write a bool', () => {
    const key = 'my_key';
    const value = true;

    service.setBool(key, value);

    expect(service.getBool(key)).toEqual(value);
  });

  it('should read and write an object', () => {
    const key = 'my_key';
    const value = {my_property: 'my_value'};

    service.setObject(key, value);

    expect(service.getObject(key)).toEqual(value);
  });
});

Answer 4

首先，您应该了解localStorage 的工作原理。您在本地存储中设置/获取值的方法错误。请阅读本文以获取更多信息：如何使用 JavaScript 使用本地存储