I try to implement now a local Storage in Angular2 for the first time and get a bit confused.

So, I have First Component, where I register my user

export class FormComponent {
  modus = ['first', 'second'];
  model: User = new User('', '', '');
  constructor(private _cookieService: CookieService) {}
}

Here is class, that I use in FormComponent

export class User {
  constructor (
    public email: string,
    public name: string,
    public modus: string
  ) {}
}

I bind it and everything in form works very good. Now I want to store it in local storage (3 parameters of User)

But how could I do this?

I leave this page with registration of user and go to other pages, like

export class Part1Component {
  public email;
  public name;
  public modus;

  constructor(private _location: Location) {}
     myTestFunction(){

    /* assign values here
       this.email = ;
       this.name = ;
       this.modus = ;
   */
       }


 }

How could I get values from storage and assign them here?

I try to implement now a local Storage in Angular2 for the first time and get a bit confused.

So, I have First Component, where I register my user

export class FormComponent {
  modus = ['first', 'second'];
  model: User = new User('', '', '');
  constructor(private _cookieService: CookieService) {}
}

Here is class, that I use in FormComponent

export class User {
  constructor (
    public email: string,
    public name: string,
    public modus: string
  ) {}
}

I bind it and everything in form works very good. Now I want to store it in local storage (3 parameters of User)

But how could I do this?

I leave this page with registration of user and go to other pages, like

export class Part1Component {
  public email;
  public name;
  public modus;

  constructor(private _location: Location) {}
     myTestFunction(){

    /* assign values here
       this.email = ;
       this.name = ;
       this.modus = ;
   */
       }


 }

How could I get values from storage and assign them here?

• javascript
• angular
• typescript
• local-storage

Share Improve this question Follow asked Aug 14, 2017 at 11:14 Anna FAnna F 1,68344 gold badges2525 silver badges4343 bronze badges 2

• Have you heard of localStorage.setItem() and localStorage.getItem()? If not, I suggest a bit of googling first – Jeremy Thille Commented Aug 14, 2017 at 11:17
• Does the user data need to be saved between instances? if not then i would create an injectable class – mast3rd3mon Commented Aug 14, 2017 at 11:26

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

Typescript provides localStorage which you can use to set and get storage data.

Use the localStorage.setItem(key, value); method where you want to set the data.

localStorage.setItem('__user__email', user.email);
localStorage.setItem('__user__name', user.name);
localStorage.setItem('__user__modus', user.modus);

.. and localStorage.getItem(key); where you want to get the data.

myTestFunction() {

    // assign values here
    this.email = localStorage.getItem('__user__email');
    this.name  = localStorage.getItem('__user__name');
    this.modus = localStorage.getItem('__user__modus');
}

---

You can have a look at this utility class and use that I created in one of my projects:

LOCAL STORAGE UTILITY CLASS

If you storing a user object in session storage by using JSON.stringify() then you can do this

let user = JSON.parse(localStorage.getItem('user'));
this.email=user.email;
this.name=user.name;

You should use localStorage.setItem() to save your data and localStorage.getItem() to get your saved data from localStorage. Please read this localStorage Documentation for more details.

Here is a simple example for using localStorage.

Save data to localStorage:

localStorage.setItem('userKey', JSON.stringify(this.model));

Beware that you can save only strings to localStorage.

Get saved data from localStorage for your Example:

let savedUser: User = JSON.parse(localStorage.getItem('userKey'));

If you want to clear or remove saved data you can use following code:

localStorage.removeItem('userKey');

or

localStorage.clear();

You can request your data from every point to localStorage in your application.

use html5 localStorage like this

localStorage.setItem("key",value) set a item and then you can get it even you close the borwser.

localStorage.getItem("key");

and it save as string