I have a data table which display data from external API, I want the number of items /element on the table page should be saved in local storage
Here is what I have tried so far:
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);
});
}
When I run my app, the console displays undefined
What is wrong with my code? any help or suggestion is welcomed, newbie trying new stuff.
This question is related to
angular
html
typescript
local-storage
You should define a key name while storing data to local storage which should be a string and value should be a string
localStorage.setItem('dataSource', this.dataSource.length);
and to print, you should use getItem
console.log(localStorage.getItem('dataSource'));
First you should understand how localStorage works. you are doing wrong way to set/get values in local storage. Please read this for more information : How to Use Local Storage with JavaScript
you can use localStorage for storing the json data:
the example is given below:-
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);
Source: Stackoverflow.com