Angular 6:将数据保存到本地存储
Posted
技术标签:
【中文标题】Angular 6:将数据保存到本地存储【英文标题】:Angular 6: saving data to local storage 【发布时间】: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的完整解释):***.com/questions/40589730/local-storage-in-angular-2/… 你应该显示 localStorage 变量的来源。 【参考方案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");
【讨论】:
以上是关于Angular 6:将数据保存到本地存储的主要内容,如果未能解决你的问题,请参考以下文章
“另存为” Angular 应用程序中 HTML5 本地存储中的文件