Angular 2 LocalStorage clears after refresh

Question

Little weird little thing here :)

So what I'm doing is when trying to log user in, I want to store access_token and expires in localStorage. Which is working "ok". But If I refresh the page the tokens are gone also if I want to see added tokens after I click login button I need to restart console (F12) in order to see them. Would you be able to see what am I doing wrong?

Service:

import { Injectable } from '@angular/core';
import { Headers, Http, Response } from '@angular/http';
import { AppSettings } from '../AppSettings.component';
import { Observable } from 'rxjs';

@Injectable()
export class UserService {

    private headers = new Headers({
        'Content-Type': 'application/json',
        'Cache-Control': 'no-cache'
    });

    constructor(private http: Http) {
    }

    loginUser(email: string, password: string, remember: boolean) {
        var data = {
            'email': email,
            'password': password,
            'client_id': AppSettings.CLIENT_ID,
            'client_secret': AppSettings.CLIENT_SECRET,
            'remember': remember
        };
        return this.http.post(AppSettings.HOST + 'auth/login', data, {headers: this.headers})
            .map(
                (response: Response) => {
                    const loginData = response.json().Result;
                    return loginData;
                })
            .do(
                responseData => {
                    localStorage.setItem('token', JSON.stringify(responseData.access_token));
                    localStorage.setItem('expires', JSON.stringify(responseData.expires));
                }
            );
    }
}

And if I refresh the page all tokens are gone too.

package.json

"dependencies": {
    "@angular/common": "^2.4.8",
    "@angular/compiler": "^2.4.8",
    "@angular/core": "^2.4.8",
    "@angular/forms": "2.4.8",
    "@angular/http": "^2.4.8",
    "@angular/platform-browser": "^2.4.8",
    "@angular/platform-browser-dynamic": "^2.4.8",
    "@angular/router": "^3.4.8",
    "angular2-social-login": "^2.1.0",
    "core-js": "^2.4.1",
    "rxjs": "5.1.1",
    "zone.js": "^0.7.7"
  }

Component

import { Component } from '@angular/core';
import { UserService } from '../../services/user.service';
import { Response } from '@angular/http';

@Component({
    selector: 'login-layout',
    templateUrl: './app/views/login/login.component.html',
    providers: [ UserService ]
})

export class LoginComponent {
    user: {};
    email: string = '';
    password: string = '';
    remember: boolean;

    constructor(private _userService: UserService) {}

    loginForm() {
        this._userService.loginUser(this.email, this.password, this.remember).subscribe(
            responseData => console.log(responseData),
            error => console.log(error)
        );
    }


}

EDIT:

Ok checked on Firefox. Tokens are stored correctly even after refresh. Seems like Chrome issue. Anyone else came accross this before?

The code above seems okay. Can you check if localStorage is being cleared when your page loads/starts from the code somewhere? Are you using incognito mode for testing? — singh88harman, Apr 21 '17 at 10:19

score 2 · Accepted Answer · edited May 23 '17 at 11:54

2

Ok... Found an issue to access localStorage crossbrowser you need to use localStorage["key"]

Silly mistake.... :)

More information can be found in this StackOverflow answer

edited May 23 '17 at 11:54

Community

1
1

answered Apr 21 '17 at 10:27

TSlegaitis

1,231
15
29

I can only accept this as an answer in 2 days since I was the one that answered it :) – TSlegaitis Apr 21 '17 at 11:15

Angular 2 LocalStorage clears after refresh

1 Answers1