[javascript] LocalStorage

두....두....?

이 글을 작성하는 이유

어제 갑자기 삘 받아서 백엔드 분들에게 사진 url과 게시글을 API로 통신하고 그걸 내 피드에 뿌려보는걸 구현하자고 했다.

사실 백엔드분들은 아무리 DB 구조를 잘짜고 뭔가 다 완성을 했다고 해도 그걸....
볼 수 없다면.... 속상하다고 하셨다.
(feat. 정현님, 지훈님, 재도님)

그래서 혹시 게시글의 정보를 입력 받고 "등록" 이라는 기능을 한번 해볼까요...? 라는 달콤한 제안이 왔는데 이거 참 거절하기엔 너무 구미가 땡기는 맛이 났다.(쓰읍)

호다닥 5분만에 본인이 원하는 게시글을 작성할 수 있는 form을 하나 만들고 click 액션으로 백엔드 분들과 통신할 수 있는 환경을 갖췄는데......

토큰을 저장하지 못한다.

로그인 화면에서 로그인 버튼을 누르고 나서 콘솔에 찍어봤을 때 토큰 값은 제대로 들어오는 걸 확인 했지만
이걸 어떻게 유지하면서 메인?
그때 주마등처럼 지나가는

localstorage

그렇다. 난 이걸 사용해야겠다.
그럼 이제 localstorage를 블로깅 하는 이유를 다들 눈치챈듯 하다.
사용해야 되니까...;;

본론 시작

먼저 application panel을 살펴보자.
f12를 누르면 열리는 화면의 상단 탭중에 application 이라는 탭이 있다. (작고 소중해....)

열린 application 화면의 기능은 브라우저 저장소IndexedDB 또는 Web SQL 데이터베이스, 로컬 및 세션 스토리지, 쿠키, 애플리케이션 캐시, 이미지, 글꼴 및 스타일시트를 포함하여 로드된 모든 리소스를 검사한다.

이 블로그에선 일단 local storage를 먼저 정리 해볼 예정이다.

localStorage.setItem("key",value);
localStorage.getItem("key");
localStorage.removeItem("key");
localStorage.clear(); 

자... 위에서부터 차근차근 밟아보ㅈ.. 알아보자.

1. setItem() 메서드를 사용하면 일부 데이터를 localStorage에 추가하는 것이고 추가를 했다면 application 패널 localStorage에 들어온 key와 value를 확인할 수 있다.

localStorage.setItem("wecode", test-value);

localStorage
// Storage {key:"wecode", length:1}

2. 특정 키의 값을 가져오려면 getItem() 메서드를 사용한다.

localStorage.getItem("wecode");

// test-value

3. 값을 삭제 하기 위해선 removeItem() 메서드를 사용한다.

localStorage.removeItem("wecode");

4. localStorage에 모든 내용을 삭제하려면 clear() 메서드를 사용한다.

localStorage.clear();

서론에서 길게 끌었던 글처럼 블로깅한 내용이 화려하진 않지만 추가 할 예정..