Angular 8 애플리케이션에서 세션 스토리지 구현

Angular 8 애플리케이션에서 세션 스토리지 구현

저는 학습에 도움이 되는 영화 애플리케이션을 만들고 있습니다.세션 저장소에서 클릭 수를 캡처하고 저장하는 방법을 알고 싶습니다.

클릭이 작동할 수 있었습니다.그것은 증가하고 각 버튼에 클릭 수를 표시합니다. 저는 이것을 지시로 했습니다.또한 버튼의 id를 키와 클릭 횟수 값으로 세션 저장소에 첨부하려고 했는데, 로그를 기록하면 작동하지만 페이지를 새로 고칠 때마다 유지되지 않는 것 같습니다.

NB: API를 사용하여 데이터를 가져오는 중입니다.

랜딩 페이지 구성요소

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)
  }

좋아요를 늘리기 위한 지침

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++);
  }
}

DOM에 액세스할 수 있고 각 버튼에서 세션 스토리지 업데이트 좋아요를 사용할 수 있기를 원합니다.

<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> 

페이지를 새로 고치는 동안 값을 저장하려면 다음을 사용할 수 있습니다.localStorage또는sessionStorage그것 때문에외부 라이브러리 또는 가져오기가 필요하지 않습니다.대부분의 브라우저에서 즉시 작동해야 합니다.

저장할 경우:

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

로드용:

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

개발 도구를 사용하여 Chrome에서 이를 확인할 수 있습니다.

세션 저장소 또는 로컬 저장소를 사용하여 데이터를 임시로 저장할 수 있습니다.

Session storage 브라우저 전체에서 사용할 수 있는 특정 탭에 사용할 수 있습니다.둘 다 기본적으로 동일한 원점이며 키, 값 쌍(값은 문자열이어야 함)을 사용하여 값을 수동으로 저장할 수도 있습니다.

브라우저의 탭(세션)이 닫히면 해당 탭에서 세션 저장소가 지워집니다. 로컬 저장소의 경우 명시적으로 지워야 합니다.최대 저장 공간 제한은 각각 5MB와 10MB입니다.

우리는 아래와 같이 데이터를 저장하고 검색할 수 있습니다.

저장 방법:

sessionStorage.setItem('id', noOfClicks);   // localStorage.setItem('id', noOfClicks);

sessionStorage.setItem('userDetails', JSON.stringify(userDetails));   // if it's object

갖기 위해

sessionStorage.getItem('id');    // localStorage.getItem('id');

User user = JSON.parse(sessionStorage.getItem("userDetails")) as User;  // if it's object

수정하는 방법:

sessionStorage.removeItem('id');    // localStorage.removeItem('id');

sessionStorage.clear();   // localStorage.clear();

추신: getItem()또한 데이터를 문자열로 반환하고 객체인 경우 액세스하려면 JSON 형식으로 변환해야 합니다.

브라우저 스토리지에 대한 자세한 내용은 여기를 참조하십시오.

1. localStorage, sessionStorage 및 cookie의 차이점

2. 로컬 스토리지-vs-vs-vs-vs-vs 스토리지

ngx-web 스토리지 모듈을 사용할 수 있습니다.

먼저 Angular 프로젝트에 종속성으로 추가해야 합니다.

npm install --save ngx-webstorage

그런 다음 기본 모듈에서 라이브러리를 선언합니다.

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 {
}

그리고 마지막으로 구성 요소에 원하는 서비스를 주입하거나 사용 가능한 데코레이터(예:

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;

    }

언급URL : https://stackoverflow.com/questions/58500879/implement-session-storage-in-an-angular-8-application