LocalStorage 활용 예시 / Angular

import { Component, OnInit } from '@angular/core';
import { Admins, Admin } from 'src/lib/admin';
import { CommonModule } from '@angular/common';
import { BadgeComponent } from 'src/app/components/badge/badge.component';
import { ButtonComponent } from 'src/app/components/button/button.component';
import { SearchboxComponent } from 'src/app/components/searchbox/searchbox.component';
import { DateboxComponent } from 'src/app/components/datebox/datebox.component';
import { PageSelectboxComponent } from 'src/app/components/page-selectbox/page-selectbox.component';
import { PaginationComponent } from 'src/app/components/pagination/pagination.component';
import { PageInfo } from 'src/lib/pagination';

import { NgxPaginationModule } from 'ngx-pagination'; // pagination
import { FormsModule } from '@angular/forms';
import { Router } from '@angular/router';

import { ModalController } from '@ionic/angular' // modal
import { ModalPage } from 'src/app/pages/modal/modal.page'; // modal page


@Component({
  selector: 'app-admin',
  templateUrl: './admin.page.html',
  styleUrls: ['./admin.page.scss'],
  standalone: true,
  imports: [
    CommonModule,
    BadgeComponent,
    ButtonComponent,
    SearchboxComponent,
    DateboxComponent,
    PageSelectboxComponent,
    PaginationComponent,
    NgxPaginationModule,
    FormsModule,


  ]
})

export class AdminPage  implements OnInit {

  admins: Admin[] = [];
  pageInfo!: PageInfo;



  constructor(
    private router: Router,
    private modalController: ModalController,
  ) {

    if(localStorage.getItem('admins') === 'undefined'){
      this.admins = Admins;
    }else{
      const item = localStorage.getItem('admins');
      if(item){
        this.admins = JSON.parse(item);
      }
    }


    localStorage.setItem('admins', JSON.stringify(this.admins)); // localStorage

    this.pageInfo = { // pagination
      itemsCount: this.admins.length,
      totalItems: this.admins.length,
      itemsPerPage: 10,
      totalPages: this.admins.length%10 === 0 ? this.admins.length : this.admins.length + 1,
      currentPage: 1,
    }
  }

  ngOnInit() {
    this.pageId = 'admin';
    this.button = 'bg-blue-950 text-white';
    this.placeholder = '공지사항 제목, 내용을 입력해주세요.';
    this.iconName = 'heroicons:magnifying-glass-solid';
    
  }


  }






  

}

1. 앵귤러는 localStorage 내장되어 있어 곧바로 "localStorage" 로 사용할 수 있습니다.