Web(Front) - Web Storage

📒 Web Storage

1️⃣ 기본 구성

• 키(key)와 값(value) 세트
• 도메인과 브라우저별로 저장
• value : 문자열

2️⃣ 메소드와 프로퍼티

• setItem(key, value) : 키와 값 쌍으로 저장
• getItem(key) : 키에 해당하는 값 읽기
• removeItem(key) : 키에 해당하는 값 삭제
• clear() : 모든 키 값 삭제
• key(index) : 인덱스에 해당하는 키
• length : 저장된 아이템 개수

3️⃣ LocalStorage

• 데이터를 사용자 로컬에 보존
• 저장, 덮어쓰기, 삭제 등 조작 가능
• JS로만 조작
• 모바일에서도 사용 가능
• Cookie와 차이점
  • 유효 기간 X → 영구적 이용 가능
  • 단순 문자열외 객체 정보 저장 가능
  • 용량제한 X / 쿠키는 도메인 당 20개의 쿠키 수 제한
  • 네트워크 요청 시 서버로 전송 X
  • 서버가 HTTP 헤더를 통해 스토리지 객체 조작 X → JS로만 조작 가능
  • origin(프로토콜, 도메인, 포트)이 다르면 접근 불가

4️⃣ SessionStorage

• 현재 떠 있는 탭에서만 유지
• 페이지 새로고침 시 데이터 유지
• 탭을 닫고 새로 열었을 경우 제거

5️⃣ LocalStorage와 SessionStorage 비교

	LocalStorage	SessionStorage
보관	데이터 지우기 전까지 영구 보관	브라우저 종료시 데이터 삭제
세션	세션 끊겨도 사용 가능	같은 세션만 사용 가능
도메인	도메인만 같으면 전역적 공유 가능	같은 도메인이라도 브라우저 다르면 다른 영역으로 인식