how to assign the value returned from local storage to a variable for further use

Question

Scenario

method for retrieving data from local storage

 GetFromLocal(){
  this.local.get('uid');
}

i want this 'uid' to use in my another methods like a static variable but not in call back.

Or is there any way to retrieve data from local storage not retuned as promise as a workaround for the above approach.

What's wrong with just using this to assign a value in your component? We need more details on what your issue is here, preferably you should post your code and error message into your question. — Graham, Aug 28 '17 at 17:45
@graham this code will return a promise and the value resolved from that promise can be used only in the call back. I want the returned value to be used outside call back for another functions too. — django, Aug 28 '17 at 17:49

joshrathke · Accepted Answer · 2017-08-28T18:36:45.290

You should use a service to access your local variable if you are going to access it from multiple areas of the application, unless you want to directly call it from the local storage every time. We opted to use a service to interact with our local storage to keep things uniform and the actual methods to access the local storage uniform.

I do prefer to pull variables into the model for the view to access. Maybe it's just my opinion, but I don't like bypassing the model if I don't have to. The below example is how we have it setup but it would work to call the function directly from the template.

Here is an example Local User Service we are currently using in an Angular 4 project.

Service

import { Injectable } from '@angular/core';

// Import Observable Dependencies
import { Observable } from 'rxjs';

export interface LocalUserObject {
    username: string,
    userID: string,
    token: string
}

@Injectable()
export class LocalUserService {

    constructor() { }

    // Get Local User Object from Local Storage
    getLocalUserObject(): LocalUserObject {
        return JSON.parse(localStorage.getItem('CurrentUser') || null);
    }

    // Set Local User Object using the given value.
    setLocalUserObject(localUserObject: LocalUserObject) {
        localStorage.setItem('CurrentUser', JSON.stringify(localUserObject));
    }

    // Destroy the Local User Object.
    destroyLocalUserObject() {
        localStorage.removeItem('CurrentUser');
    }
}

Once you have created the service and imported it into your component, you can use the functions within to grab your variables out of local storage.

Component

import { Component, OnInit, } from '@angular/core';
import { LocalUserService, LocalUserObject } from './_services/local-user.service';

@Component({
    selector: 'users',
    templateUrl: './users.component.html'
})

    export class UsersComponent implements OnInit {

    LocalUserObject: LocalUserObject;

    constructor(
        private _LocalUserService: LocalUserService,
    ) { }

    ngOnInit() {
        this.LocalUserObject = this._LocalUserService.getLocalUserObject();
    }

}

Then in your template you would access the object like this.

Template

{{ LocalUserObject.username }}

I was using the same structure to acces data from storage but the only difference is , **I used** this.local.get('uid').then(uid=>{ console.log(uid); }) **Instead of** localStorage.getItem('uid')). I was wondering if there is any difference as my way of doing was returning promise and the other one is returning string.? — django, Aug 28 '17 at 18:51
Hmmmm... I think I understand a little bit better. I would say not really. Accessing Local storage should be "immediate" for the most part so you shouldn't really need to worry about waiting for it to happen. We prefer returning the actual value because its just easier. And like you said you can use it in the template directly. — joshrathke, Aug 28 '17 at 18:54
If my understanding is correct , both are different libraries. So can you suggest which one is better as you have already hands-on experiance in terms of storage space and ease of use. FYI, I am developing an ionic app using angular. — django, Aug 28 '17 at 18:59
Check [This SO Question](https://stackoverflow.com/questions/12632463/is-localstorage-getitemitem-better-than-localstorage-item-or-localstoragei) out. I think long story short, it depends on your definition of "better". In your case it seems like simplicity of the value returned is important, therefore using `getitem` is "better" since you can use it directly as its returned. But that's just my opinion based on the your use case. — joshrathke, Aug 28 '17 at 19:03

how to assign the value returned from local storage to a variable for further use

Scenario

method for retrieving data from local storage

1 Answers1