How to store token in Local or Session Storage in Angular 2

Question

I want to use Local or session storage to save authentication token in angular 2 0 0  I  use angular2-localstorage but it works only angular 2 0 0-rc 5 and when I used it in 2 0 0 it through me Type error  I want to use default local storage of Angular 2 0 0

User · Answer

we can store session storage like that

store token should be like

 localStorage.setItem('user', JSON.stringify({ token: token, username: username }));

Store Session in to sessionStorage

You can store both string and array into session storage

String Ex.

    let key = 'title'; 
    let value = 'session';
    sessionStorage.setItem(key, value);

Array Ex.

    let key = 'user'; 
    let value = [{'name':'shail','email':'[email protected]'}];

    value = JSON.stringify(value);

    sessionStorage.setItem(key, value);

Get stored session from sessionStorage by key

const session = sessionStorage.getItem('key');

Delete saved session from sessionStorage by key

sessionStorage.removeItem('key');

Delete all saved sessions from sessionStorage

sessionStorage.clear();

store Local storage should be like

Store items in to localStorage

You can store both string and array into location storage

String Ex.

 let key = 'title'; 
 let value = 'session';
 localStorage.setItem(key, value);

Array Ex.

let key = 'user'; 
let value = [{'name':'shail','email':'[email protected]'}];

value = JSON.stringify(value);

localStorage.setItem(key, value);

Get stored items from localStorage by key

const item = localStorage.getItem('key');

Delete saved session from localStorage by key

localStorage.removeItem('key');

Delete all saved items from localStorage

localStorage.clear();

User · Answer

Simple example   var userID   data id   localStorage setItem  userID  JSON stringify userID

User · Answer

import   Injectable OpaqueToken   from   angular core    export const localStorage   new OpaqueToken  localStorage      Place these lines in the top of the file  it should resolve the issue

User · Answer

That totally depends of what do you need exactly  If you just need to store and retrieve a token in order to use it in your http requests   i suggest you to simply create a service and use it in your whole project   example of basic integration   import  Injectable  from  angular core    Injectable   export class TokenManager        private tokenKey string    app token        private store content Object            localStorage setItem this tokenKey  JSON stringify content               private retrieve             let storedToken string   localStorage getItem this tokenKey           if  storedToken  throw  no token found           return storedToken             public generateNewToken             let token string           custom token generation          let currentTime number    new Date    getTime     ttl          this store  ttl  currentTime  token               public retrieveToken              let currentTime number    new Date    getTime    token   null          try               let storedToken   JSON parse this retrieve                 if storedToken ttl  lt  currentTime  throw  invalid token found               token   storedToken token                    catch err                console error err                     return token              However if you need to use the local storage more often  by using the stored values in your app views for example   You can use one of the libraries that provides a wrapper of the webstorages like you did with angular2-localstorage   I created some months ago ng2-webstorage that should respond to your needs  It provides two ng2 services and two decorators to sync the webstorage s values and the service component s attributes   import  Component  from   angular core   import  LocalStorageService  LocalStorage  from  ng2-webstorage     Component       selector   foo       template             lt section gt   boundValue   lt  section gt           lt section gt  lt input type  text    ngModel    attribute   gt  lt  section gt           lt section gt  lt button  click   saveValue    gt Save lt  button gt  lt  section gt            export class FooComponent         LocalStorage       boundValue     attribute bound to the localStorage     value       constructor private storage LocalStorageService            this localSt observe  boundValue     triggers the callback each time a new value is set              subscribe  newValue    gt  console log  new value   newValue               saveValue           this storage store  boundValue   this value      store the given value

User · Answer

Here is the best practice  https   github com PillowPillow ng2-webstorage  I was use it in AngularJs  now with Angular2  Wery usefull

User · Answer

Adding onto Bojan Kogoj s answer   In your app module ts  add a new provider for storage    NgModule      providers            provide  Storage  useValue  localStorage            imports        declarations         And then you can use DI to get it wherever you need it     Injectable       providedIn  root       export class StateService       constructor private storage  Storage

User · Answer

var arr    username   sai   email   sai example com     localStorage setItem  logInArr   JSON stringfy arr

User · Answer

Save to local storage  localStorage setItem  currentUser   JSON stringify   token  token  name  name        Load from local storage  var currentUser   JSON parse localStorage getItem  currentUser     var token   currentUser token     your token   For more I suggest you go through this tutorial  Angular 2 JWT Authentication Example  amp  Tutorial

User · Answer

As a general rule  the token should not be stored on the localStorage neither the sessionStorage  Both places are accessible from JS and the JS should not care about the authentication token    IMHO The token should be stored on a cookie with the HttpOnly and Secure flag as suggested here  https   stormpath com blog where-to-store-your-jwts-cookies-vs-html5-web-storage

[angular] How to store token in Local or Session Storage in Angular 2?

Examples related to angular

Examples related to local-storage