[JavaScript] 웹 스토리지(localStorage, sessionStorage)란?

웹 스토리지란?

웹 스토리지는 *쿠키와 비슷하게 해당 도메인과 관련된 특정 데이터를 서버가 아니라 클라이언트에 저장 할 수 있도록 하는 기능입니다. HTML5에 도입된 새로운 기능으로, 쿠키와 유사하지만 차이점을 가지고 있습니다.

 

*쿠키에 대해선 아래의 내용을 참고하세요.

https://j-su2.tistory.com/42

[네트워크] 쿠키(Cookie), 세션(Session)이란?

 

웹 스토리지의 특징과 쿠키와의 차이점

• 키와 값의 쌍 형태로 데이터를 저장
• 쿠키와 달리, 서버에 전송되지 않아 서버에 부담이 가지 않음(자바스크립트 내에서 수행)
• 쿠키와 달리, 필요한 경우에만 꺼내 쓰는 것이라 자동 전송의 위험성이 없음
• 도메인 단위로 접근이 제한되는 특성을 가지고 있음. 즉, 다른 도메인은 요청해도 값을 주지 않음(CSRF 안전)
• 5KB까지 데이터를 저장할 수 있음(쿠키는 4KB)
• 유효기간이 존재하지 않음
• 문자형(string)데이터 타입만 지원

 

웹 스토리지의 종류

웹 스토리지는 localStorage와 sessionStorage 2가지로 각각의 고유한 특성을 가지고 있어 필요에 따라 선택적으로 사용하게 됩니다. 이들은 window 객체의 프로퍼티로서 존재하며, 같은 Storage 객체를 상속하기 때문에 동일한 메소드를 가지고 있습니다.

 

웹 스토리지의 공통 메소드

메소드	설명
setItem(key, value)	키-값 쌍을 보관
getItem(key)	키에 해당하는 값을 받아옴
removeItem(key)	키와 해당 값을 삭제
clear()	모든 것을 삭제
key(index)	인덱스(index)에 해당하는 키를 받아옴
length	저장된 항목의 개수를 가져옴

 

로컬 스토리지(Local Storage)

window.loacalStorage객체로 브라우저를 종료해도 유지되는 데이터입니다.

 

• 명시적으로 지우지 않는 한 영구적으로 저장됨
• 도메인별로 생성되어, 서로 다른 브라우저 탭이라도 동일한 도메인이라면 동일한 로컬 스토리지를 사용
• 지속적으로 필요한 정보를 저장할때 사용 (ex. 자동 로그인)

localStorage.setItem('item', 1);
console.log(localStorage.getItem('item')); // 다른 창에서 같은 페이지를 열어봄 : 1

개발자 도구의 Applicaion탭에서 Local Storage를 확인할 수 있습니다.

 

 

세션 스토리지(Session Storage)

window.seeionStorage객체로 탭/윈도우를 닫기 전까지 유지되는 데이터입니다.

• 세션 쿠키와 달리, 탭/윈도우 단위로 세션 스토리지가 생성
• window 객체와 동일한 유효 범위 및 생존 기간을 가짐
• 탭/윈도우를 닫을 시 데이터가 삭제됨
• 같은 도메인이더라도 세션이 다르면 데이터에 접근할 수 없음
• 독립적으로 작동 (다른 세션 스토리지와 서로 영향을 주지 않음)
• 잠시 동안 필요한 정보를 저장(ex. 입력 폼 저장, 일회성 로그인)

sessionStorage.setItem('item', 1);
console.log(sessionStorage.getItem('item')); // 새로 고침 후 : 1

개발자 도구의 Applicaion탭에서 Session Storage를 확인할 수 있습니다.

 

 

[참고]

https://velog.io/@dorazi/%EC%BF%A0%ED%82%A4-%EC%9B%B9-%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80-%EB%A1%9C%EC%BB%AC-%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80-%EC%84%B8%EC%85%98-%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80

쿠키, 웹 스토리지 (로컬 스토리지, 세션 스토리지)

https://untitledtblog.tistory.com/47

웹 스토리지 (Web Storage)의 특성과 사용법