프로젝트를 진행하다보면 로컬 스토리지와 세션 스토리지란 말을 자주 들어봤을 것이다.
HTML5에서 추가된 저장소이며 간단한 키와 값을 저장할 수 있습니다.
로컬 스토리지와 세션스토리지를 웹 스토리지라고 부릅니다.

👩🏻‍💻 웹 스토리지

HTTP 요청과 응답으로는 클라이언트 상태를 보존하지 않는다.
클라이언트 상태를 서버가 아닌 클라이언트에 저장해두고 필요할 때 마다 데이터를 꺼내서 서버에 전달 하는 방식으로 HTTP의 단점을 보완하고자 쿠키오 웹 스토리지를 사용하는데 이 글에서는 웹스토리지만 간단하게 풀어볼까 한다.

장점으로는

• 서버에 불필요하게 데이터 저장을 안 해도 됨
• 넉넉한 데이터 저장 용량
• 문자열 외에도 자바스크립트의 모든 원시형 데이터와 객체 저장 가능
• 도메인 단위로 접근 제한되는 CORS 특성 덕분에 CSRF로부터 안전

단점으로는

• HTML5를 지원하는 브라우저만 사용 가능
• XSS로 부터 위험 - local storage에 접근하는 js 코드로 쉽게 접근 가능

📌 로컬 스토리지

로컬스토리지는 브라우저를 종료해도 데이터 영구 저장이 가능하다.
그리고 도메인만 같다면 전역으로 데이터 공유가 가능한 특성을 가지고 있다.
자동 로그인 같은 지속적으로 필요한 데이터 저장이 필요할 때 사용한다.

저장

window.localStorage.setItem(key, JSON.stringify(value));

조회

window.localStorage.getItem(key);

// 예외처리 예시
export const getLocalStorage = <T>(key: string): T | undefined => {
  try {
    return JSON.parse(window.localStorage.getItem(key) ?? '');
  } catch {}
};

삭제

window.localStorage.removeItem(key);

예외처리 같은 경우는 JSON.parse() 함수를 호출할 때 발생할 수 있는 예외를 처리하기 위해서 이다. JSON.parse() 함수는 문자열을 파싱하여 JavaScript 객체로 변환하는 함수이다. 하지만 파라미터로 유효하지 않은 JSON 형식의 문자열이 들어올 경우, 예외(에러)가 발생한다. 예를 들어, 유효하지 않은 JSON 문자열인 경우에는 SyntaxError 예외가 발생한다.

📌 세션 스토리지

세션스토리지는 브라우저가 종료되면 데이터가 삭제 됩니다. 도메인이 같더라도 브라우저가 다르면 브라우저 컨텍스트가 다르기 때문에 각각 세션 스토리지가 형성되어 데이터가 공유 되지 않는다.
일회성 로그인, 입력 폼 저장, 비로그인 장바구니 등 일시적으로 필요한 데이터 저장이 필요할 때 사용한다.

저장

window.sessionStorage.setItem(key, JSON.stringify(value));

조회

window.sessionStorage.getItem(key);

// 예외처리 예시
export const getSessionStorage = <T>(key: string): T | undefined => {
  try {
    return JSON.parse(window.sessionStorage.getItem(key) ?? '');
  } catch {}
};

삭제

window.sessionStorage.removeItem(key);

초보자들이 보면 좋은 글을 가져왔다.
참고하길!