title: Implement session storage in an Angular 8 application
body: <p>I am building a movie application to aid my learning. I will like to know how to capture and save the number of clicks on button in session storage.</p>
  <p>I have been able to get the click working. It increases and display number of click on each button, I did this with a directive. I also tried to attached the id of the button as key and number of click as value to session storage and I could see that it works when I logged it but it seem not to remain whenever I refresh the page.</p>
  <p>NB: I am using an API to fetch my data</p>
  <h2>Landingpage component</h2>
  <pre><code>import { CountClicks } from './counter.directive';
  import { HttpService } from './../http.service';
  import { Component, OnInit, ElementRef } from &quot;@angular/core&quot;;
  
  
  @Component({
    selector: &quot;app-landing-page&quot;,
    templateUrl: &quot;./landing.component.html&quot;,
    styleUrls: [&quot;./landing.component.scss&quot;]
  })
  export class LandingPageComponent implements OnInit {
    constructor(private _http: HttpService, private elRef:ElementRef) {}
    movies: Object;
    title = &quot;CORNFLIX&quot;;
    ids:any;
    storage:any;
    public likeCounter: number = 0;
    ngOnInit() {
      this._http.getMovies().subscribe(data =&gt; {
        this.movies = data;
        // for (let x of data['results']){
        //   if(sessionStorage.getItem('#'+x.id) != null){
        //     console.log(&quot;#&quot; + x.id);
        //     this.ids = sessionStorage.getItem(&quot;#&quot; + x.id);
        //     console.log(this.ids);
        //   }
  
        // }
        // console.log(this.ids);
      });
      this.storage = sessionStorage
      console.log(this.storage)
    }
  </code></pre>
  <h2>Directive for increasing likes</h2>
  <pre><code>import { Directive, HostListener } from &quot;@angular/core&quot;;
  
  @Directive({ selector: &quot;a[counting]&quot; })
  
  
  export class CountClicks {
    numberOfClicks = 1;
    number:any
    store:any;
    getValue:any;
    
    
    @HostListener(&quot;click&quot;, [&quot;$event.target&quot;])
    onClick(a): void {
      
      a.innerHTML = `Likes ${this.numberOfClicks++}`;
      this.number = this.numberOfClicks+1
      // console.log(localStorage.getItem(a.id));
      if(sessionStorage.getItem(a.id)){
          this.number = sessionStorage.getItem(a.id);
          // sessionStorage.clear()
      }
      this.store = sessionStorage.setItem(a.id, a.innerHTML);
      this.getValue = sessionStorage.getItem(a.id)
      a.innerHTML = this.getValue;
      // console.log(&quot;button&quot;, btn.id, &quot;number of clicks:&quot;, this.numberOfClicks++);
    }
  }
  </code></pre>
  <p>I want to be able to access the DOM and have the session storage update likes on each buttons</p>
  <pre><code>&lt;section class=&quot;jumbotron&quot;&gt;
      &lt;h2&gt;
         Welcome to {{title}}
      &lt;/h2&gt;
  
  &lt;/section&gt;
  
  &lt;div *ngIf=&quot;movies&quot; class=&quot;container-fluid d-flex p-2 bd-highlight mb-3 flex-wrap  justify-content-between&quot;&gt;
      
      &lt;div *ngFor = &quot;let movie of movies['results']&quot; class=&quot;card d-block mb-3 &quot; style=&quot;width: 18rem;&quot;&gt;
          &lt;img src='https://image.tmdb.org/t/p/w500{{movie.poster_path}}' class=&quot;card-img-top&quot; alt=&quot;Movie image&quot;&gt;
          &lt;div  class=&quot;card-body&quot;&gt;
              &lt;h5  class=&quot;card-title&quot;&gt;Title: {{movie.title}}&lt;/h5&gt;
              &lt;p class=&quot;card-text&quot;&gt;Year: {{movie.release_date.slice(0, 4)}}&lt;/p&gt;
              &lt;a href=&quot;#/&quot; class=&quot;btn btn-color&quot; id={{movie.id}}&gt;More details&lt;/a&gt;
              &lt;a href=&quot;#/&quot;   class=&quot;btn btn-color&quot; #{{likeCounter}} id=#{{movie.id}} counting&gt;Likes&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>