Front-end/JavaScript

자바스크립트 웹 스토리지(Web Storage)

NiceKHJ 2024. 8. 22. 11:06

웹 스토리지는 브라우저에서 데이터를 클라이언트 측에 저장할 수 있게 해주는 강력한 기능입니다.

쿠키의 한계를 극복하고 더 많은 데이터를 안전하게 저장할 수 있어 현대 웹 애플리케이션에서 널리 사용되고 있습니다.

 

웹 스토리지의 특징

  1. 최대 5MB까지의 데이터 저장 가능
  2. 서버로 전송되지 않아 네트워크 트래픽 감소
  3. 문자열 형태로 데이터 저장

 

 

웹 스토리지의 종류

 

웹 스토리지는 크게 두 가지 유형이 있습니다.

  1. sessionStroage : 브라우저 세션 동안만 데이터 유지
  2. localStorage : 브라우저를 닫아도 데이터 영구 보존

 

sessionStrorage

 

sessionStrorage는 페이지의 세션이 유지되는 동안에만 데이터를 저장합니다. 사용자가 탭이나 창을 닫으면 데이터가 제거됩니다.

 

 

 

localStorage

 

localStorage는 브라우저를 닫아도 데이터가 유지됩니다. 사용자가 명시적으로 삭제하거나 브라우저 설정에서 삭제하지 않는 한 데이터가 영구적으로 저장됩니다.

 

웹 스토리지 메서드

 

웹 스토리지 객체(sessionStorage와 localStorage)는 다음과 같은 주요 메서드를 제공합니다.

  • setItem(key , value) : 키-값 쌍을 저장
  • getItem(key) : 지정된 키의 값을 반환
  • removeItem(key) : 지정된 키의 항목을 제거
  • clear() : 모든 키-값 쌍을 제거
  • key(index) : 주어진 인덱스의 키 이름을 반환

 

'Front-end > JavaScript' 카테고리의 다른 글

자바스크립트 Fetch API  (0) 2024.08.30
자바스크립트 HTTP 통신  (0) 2024.08.23
자바스크립트 이벤트 처리  (0) 2024.08.19
자바스크립트 체크박스 전체선택 구현  (0) 2024.08.14
자바스크립트 DOM  (0) 2024.08.13