How to Use Local Storage in Angular

Angular 6: saving data to local storage

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

Angular 7 Local Storage

LocalStorage doesn't provide any streams to you. Those are just static values. If you use that service correctly (your app share one its instance), probably would be enough just to return the value from localStorage:

getLocal() {
  this.user = this.local.getLocal();

p.s. also other methods doesnt make sense, ex.:

setLocal(user) {
      return localStorage.getItem(user);

1. not getItem, but setItem
2. No need to return it

How do I store data in local storage using Angularjs?

this is a bit of my code that stores and retrieves to local storage. i use broadcast events to save and restore the values in the model.

app.factory('userService', ['$rootScope', function ($rootScope) {

    var service = {

        model: {
            name: '',
            email: ''
        },

        SaveState: function () {
            sessionStorage.userService = angular.toJson(service.model);
        },

        RestoreState: function () {
            service.model = angular.fromJson(sessionStorage.userService);
        }
    }

    $rootScope.$on("savestate", service.SaveState);
    $rootScope.$on("restorestate", service.RestoreState);

    return service;
}]);

localstorage value set in one component gives null in other component angular

Create a getter/setter in your user service which returns/sets a ReplaySubject, add the value in that ReplaySubject when you get the response from the userService method this.userService.getUserDetails. And then in your user-section subscribe to your getter from the userService to get the details only when the user data is set in the localStorage.

User Service

selectedUserInLocal$: ReplaySubject<boolean> = new ReplaySubject();

setSelectedUserFlag(temp: boolean): void{
   this.selectedUserInLocal$.next(temp);
} 
getSelectedUserFlag(): ReplaySubject<boolean> {
   return this.selectedUserInLocal$;
}

getUserDetails() {
 this.userService.getUserDetails(this.id).subscribe((data) => {
      if (data["status"] === false) {
      } else {
        this.loadingFlag = true;
        this.selecteduser = data["data"];
        localStorage.setItem(
        "selecteduser",
           JSON.stringify(data["data"])
         );
         this.userService.setSelectedUserFlag(true);
     }
 });
}

User Section Component

unsubscribe$: Subject<void> = new Subject();

constructer(private userService: UserService) {}

ngOnInit(): void {
 this.userService.getSelectedUserFlag().pipe(filter((value) => {
    return value !== undefined || value !== false;
  }),
takeUntil(this.unsubscribe$)
).subscribe(
    resp  => {
      console.log('user sec', JSON.parse(localStorage.getItem('selecteduser'))); 
    }
  );
}

ngOnDestroy(): void {
  this.unsubscribe$.next();
  this.unsubscribe$.complete();
}

Edit

 this.userService.getSelectedUserFlag().pipe(
            first((user) => user !== null || user !== false || user !== undefined)
        ).subscribe(
            resp  => {
              console.log('user sec', JSON.parse(localStorage.getItem('selecteduser'))); 
            }
          );

---

Related Topics