I have this small moviesDB app with firebase. If you search the movie in the home page, youll'see results retrieved from this open API and now you are in a detailed page via routing. In this page you can send reviews to a collection in firebase and like the movie (all in the same node):

[![enter image description here](https://i.stack.imgur.com/f68EM.png)](https://i.stack.imgur.com/f68EM.png)

My issue: prevent the user to like the same movie more than once. So far I have this:

Like Component HTML:

```
<button [disabled]="plus>1" (click)="increase()" class="btn btn-success">Like this Movie!</button>

```

Like TS:

```
export class LikeComponent implements OnInit {
  @Output() change=new EventEmitter()
  plus:number=1;
  constructor() { }

  ngOnInit() {
  }

increase(){

  this.change.emit({like:this.plus++})
}

```

The detail HTML where I fetch the event:

```
 <div class="col-md-6 form-group">
    <form [formGroup]="reviewForm" (ngSubmit)="submitReview()">
    <label for="review">Write your review!</label>
    <textarea class="form-control" rows="5" formControlName="review"></textarea>
    <button class="btn btn-success" [disabled]="reviewForm.invalid && likeable"  type="submit">Send review</button>
  </form>
  <app-like style="float:right" (change)="onChange($event)"></app-like>
  </div>

```

And the TS:

```
export class DetailComponent implements OnInit {
  id: string;
  userReviews:any;
  userName:string;
  likes:any;
  constructor(
    private movieService: MoviesService,
    private route: ActivatedRoute,
    private fb: FormBuilder,
    private location: Location,
    private authService: AuthService,
    private afAuth: AngularFireAuth,
    private localService: LocalService  ) {

      this.afAuth.authState.subscribe(user => {
        this.userName = user.displayName;
      })

  }

  ngOnInit() {
    this.route.paramMap
      .pipe(
        switchMap(params => {
          this.id = params.get("title");
          return this.movieService.getMovies(this.id);
        })
      )
      .subscribe(data => {
        this.movie = data
        //etc
  }

reviews(){
  this.reviewForm= this.fb.group({
    review: ['', Validators.required]
  })
}
get userReview(){return this.reviewForm.get('review')}

onChange(event){
  this.likes=event
}

submitReview(){
  if(this.likes===undefined){ //->firebase doesnt accept undefined
    this.likes=null
  }
let credentials = {
  author: this.userName,
  review: this.userReview.value,
  movie: this.id,
  likes: this.likes
}

  this.movieService.createReview(credentials).then(data=>{
    console.log(data)
  }).catch(error=>{
    console.log(error)
  })
}

```

So as you can see, the LIKE button is only available if the `plus` variable has more than one vote. It works, actually, but as I refresh the page or leave and get back, the button is available again. How can I work this around? Any thoughts? Thanks

EDIT (answer based on @JBoothUA hint)

I have implmented like this

```
export class LikeComponent implements OnInit {
  @Output() change=new EventEmitter()
  plus:number=1;
  local:any;
  constructor() { }

  ngOnInit() {
    this.local = JSON.parse(localStorage.getItem("plus"));
  }

increase(){
localStorage.setItem('plus', JSON.stringify( this.plus++))
  this.change.emit({like:this.plus++})
}

```

But no results. After refresing the the button is available again. What am I doing wrong?

EDIT 2 @JBoothUA, @Rahul Tokase and @Shravan 

Everything works now with ths code:

```
export class LikeComponent implements OnInit {
  @Output() change = new EventEmitter()
  plus: number = 1;
  constructor() { }
  ngOnInit() {
  this.plus = +localStorage.getItem('plus')

  }

  increase() {
    localStorage.setItem('plus',''+ ++this.plus)
    this.change.emit({ like: this.plus++ })
  }

```

But now, well its pretty logical, now the user cannot vote any other movie, like he has only one vote foe rhousands of movies. I guess I have to associate this with the particular movie he has voted for. How am I going to achieve that? Is this the right path or the whole thing should be redone?