web-dev-qa-db-fra.com

Implémenter le stockage de session dans une application Angular 8

Je crée une application de film pour faciliter mon apprentissage. J'aimerai savoir comment capturer et enregistrer le nombre de clics sur le bouton dans le stockage de session.

J'ai pu faire fonctionner le clic. Il augmente et affiche le nombre de clics sur chaque bouton, je l'ai fait avec une directive. J'ai également essayé d'attacher l'ID du bouton comme clé et le nombre de clics comme valeur au stockage de session et j'ai pu voir que cela fonctionne lorsque je l'ai connecté, mais il semble ne pas rester chaque fois que je rafraîchis la page.

NB: j'utilise une API pour récupérer mes données

Composant Landingpage

import { CountClicks } from './counter.directive';
import { HttpService } from './../http.service';
import { Component, OnInit, ElementRef } from "@angular/core";


@Component({
  selector: "app-landing-page",
  templateUrl: "./landing.component.html",
  styleUrls: ["./landing.component.scss"]
})
export class LandingPageComponent implements OnInit {
  constructor(private _http: HttpService, private elRef:ElementRef) {}
  movies: Object;
  title = "CORNFLIX";
  ids:any;
  storage:any;
  public likeCounter: number = 0;
  ngOnInit() {
    this._http.getMovies().subscribe(data => {
      this.movies = data;
      // for (let x of data['results']){
      //   if(sessionStorage.getItem('#'+x.id) != null){
      //     console.log("#" + x.id);
      //     this.ids = sessionStorage.getItem("#" + x.id);
      //     console.log(this.ids);
      //   }

      // }
      // console.log(this.ids);
    });
    this.storage = sessionStorage
    console.log(this.storage)
  }

Directive pour augmenter les likes

import { Directive, HostListener } from "@angular/core";

@Directive({ selector: "a[counting]" })


export class CountClicks {
  numberOfClicks = 1;
  number:any
  store:any;
  getValue:any;


  @HostListener("click", ["$event.target"])
  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("button", btn.id, "number of clicks:", this.numberOfClicks++);
  }
}

Je veux pouvoir accéder au DOM et avoir les likes de mise à jour du stockage de session sur chaque bouton

<section class="jumbotron">
    <h2>
       Welcome to {{title}}
    </h2>

</section>

<div *ngIf="movies" class="container-fluid d-flex p-2 bd-highlight mb-3 flex-wrap  justify-content-between">

    <div *ngFor = "let movie of movies['results']" class="card d-block mb-3 " style="width: 18rem;">
        <img src='https://image.tmdb.org/t/p/w500{{movie.poster_path}}' class="card-img-top" alt="Movie image">
        <div  class="card-body">
            <h5  class="card-title">Title: {{movie.title}}</h5>
            <p class="card-text">Year: {{movie.release_date.slice(0, 4)}}</p>
            <a href="#/" class="btn btn-color" id={{movie.id}}>More details</a>
            <a href="#/"   class="btn btn-color" #{{likeCounter}} id=#{{movie.id}} counting>Likes</a>
        </div>
    </div>
</div>
angulartypescriptsession-storage
1
Darotudeen

Pour enregistrer des valeurs tout en actualisant la page, vous pouvez utiliser le localStorage ou le sessionStorage pour cela. Aucune bibliothèque externe ou importation n'est nécessaire. Cela devrait fonctionner dès la sortie de la boîte dans la plupart des navigateurs.

Pour économiser:

// clicks is the variable containing your value to save
localStorage.setItem('clickCounter', clicks);
// If you want to use the sessionStorage
// sessionStorage.setItem('clickCounter', clicks);

Pour le chargement:

const clicks = localStorage.getItem('clickCounter');
// If you want to use the sessionStorage
// const clicks = sessionStorage.getItem('clickCounter');

Vous pouvez vérifier cela dans Chrome en utilisant les outils de développement.

enter image description here

4
Ling Vu

vous pouvez stocker les données quelque chose comme ci-dessous ..

en savoir plus sur le stockage par navigateur ici

pour enregistrer les données 

sessionStorage.setItem('id', noOfClicks);

pour obtenir les données 

sessionStorage.getItem(id');
1
ganesh045

Vous pouvez utiliser le module ngx-webstorage

Tout d'abord, vous devez l'ajouter en tant que dépendance dans votre projet Angular 

npm install --save ngx-webstorage

Déclarez ensuite la bibliothèque dans votre module principal, par ex.

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {NgxWebstorageModule} from 'ngx-webstorage';

@NgModule({
    declarations: [...],
    imports: [
        BrowserModule,
        NgxWebstorageModule.forRoot(),
        //NgxWebstorageModule.forRoot({ prefix: 'custom', separator: '.', caseSensitive:true }) 
        // The forRoot method allows to configure the prefix, the separator and the caseSensitive option used by the library
        // Default values:
        // prefix: "ngx-webstorage"
        // separator: "|"
        // caseSensitive: false
    ],
    bootstrap: [...]
})
export class AppModule {
}

et enfin Injectez les services que vous souhaitez dans vos composants et/ou utilisez les décorateurs disponibles par ex.

import {Component} from '@angular/core';
import {LocalStorageService, SessionStorageService} from 'ngx-webstorage';

@Component({
    selector: 'foo',
    template: `foobar`
})

    export class FooComponent {

        constructor(private localSt:LocalStorageService) {}

        ngOnInit() {
            this.localSt.observe('key')
                .subscribe((value) => console.log('new value', value));
        }

    }

    import {Component} from '@angular/core';
    import {LocalStorage, SessionStorage} from 'ngx-webstorage';

    @Component({
        selector: 'foo',
        template: `{{boundValue}}`,
    })
    export class FooComponent {

        @LocalStorage()
        public boundValue;

    }
0
Eduardo Eljaiek