Angular 6: saving data to local storage

Question

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.

Possible duplicate of [Local storage in Angular 2](https://stackoverflow.com/questions/40589730/local-storage-in-angular-2) — mpro, Dec 17 '18 at 08:52
See this link (a complete explanation for LocalStorage and SessionStorage) : https://stackoverflow.com/questions/40589730/local-storage-in-angular-2/57635667#57635667 — AbolfazlR, Jun 17 '20 at 10:54

score 112 · Accepted Answer · answered Jul 26 '18 at 10:06

112

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'));

answered Jul 26 '18 at 10:06

Sajeetharan

203,447
57
330
376

when i run local storage in console I get the following : `Storage {[object Object]: "undefined", dataSource: "undefined", length: 2} [object Object] : "undefined" dataSource : "undefined" length : 2 __proto__ : Storage` in a page I am displaying 5 items per page, what else do I need to change? – The Dead Man Jul 26 '18 at 10:48
4

use JSON.parse to parse the object – Sajeetharan Jul 26 '18 at 10:51
1

I changed dataSource to items now works fine , thanks – The Dead Man Jul 26 '18 at 11:06

score 17 · Answer 2 · answered Oct 23 '20 at 10:45

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);

score 4 · Answer 3 · answered Jul 26 '18 at 10:16

4

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

answered Jul 26 '18 at 10:16

Ramesh Rajendran

35,211
40
143
222

Junaid · Answer 4 · 2021-10-10T13:03:08.083

This question has already been answered here in great details. Check it out.

But if you are feeling lazy, here's a sneak peak.

// 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: saving data to local storage

4 Answers4

Linked

Related