Angular 6：将数据保存到本地存储答案

【问题标题】：Angular 6: saving data to local storageAngular 6：将数据保存到本地存储
【发布时间】：2019-01-03 07:09:04
【问题描述】：

我有一个显示来自外部 API 的数据的数据表，我希望将表页面上的项目/元素的数量保存在本地存储中

这是我迄今为止尝试过的：

 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

我的代码有什么问题？欢迎任何帮助或建议，新手尝试新事物。

【问题讨论】：

Local storage in Angular 2的可能重复
看这个链接（LocalStorage和SessionStorage的完整解释）：stackoverflow.com/questions/40589730/local-storage-in-angular-2/…
你应该显示 localStorage 变量的来源。

标签： angular html typescript local-storage

【解决方案1】：

您应该在将数据存储到本地存储时定义一个键名，该键名应该是一个字符串，值应该是一个字符串

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

要打印，你应该使用 getItem

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

【讨论】：

当我在控制台中运行本地存储时，我得到以下信息：Storage {[object Object]: "undefined", dataSource: "undefined", length: 2} [object Object] : "undefined" dataSource : "undefined" length : 2 __proto__ : Storage 在一个页面中我每页显示 5 个项目，我还需要更改什么？
使用 JSON.parse 解析对象
我将 dataSource 更改为 items 现在可以正常工作了，谢谢

【解决方案2】：

首先您应该了解localStorage 的工作原理。您在本地存储中设置/获取值的方法错误。请阅读此内容以获取更多信息：How to Use Local Storage with JavaScript

【讨论】：

【解决方案3】：

您可以使用 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);

【讨论】：

【解决方案4】：

这个问题已经在here 得到了详细的回答。看看吧。

但如果你觉得懒惰，这里有一个偷偷摸摸的高峰。

// General syntax for storing data
localStorage.setItem('key', 'value');
// Also note that both the key & the value has to be strings. 
// So we stringify the value(if it's an object) before setting it.

// So, if you have an object as a value that you want to save, stringify it like this

let data = {
  'token': 'token',
  'name': 'name'
};
localStorage.setItem('myLSkey', JSON.stringify(data));

// OR for individual key-value pairs
localStorage.setItem('myLSkey', JSON.stringify({
  'token': 'token',
  'name': 'name'
}));

// To retrieve the data & save it to an existing variable
data = JSON.parse(localStorage.getItem('myLSkey'));

// To remove a value/item from localStorage
localStorage.removeItem("myLSkey");

【讨论】：