[2019.05.01] Local Storage와 Session Storage

 

웹사이트의 정보를 저장하기 위해 사용하는 저장소 쿠키.

기존의 쿠키만 사용하던 방식을 쓰면 아래와 같은 제약이 있다.

# 쿠키의 제약

• 4KB라는 용량
• 항상 http 요청 시 헤더에 포함되므로 웹이 느려지는 원인.
• 암호화되지 않기 때문에 보안에 취약.
• 사용자의 로컬에 저장되어 쉽게 접근. 내용 확인 가능

 

위와 같은 사항을 해결하기 위해, HTML5에서 추가된 기능인 Web Storage라는 것이 있다.

 

# 웹 스토리지 특징

• 최대 5MB의 용량 
• 웹 브라우저 로컬에 저장
• http 요청 시 헤더에 추가되지 않음.

 

웹 스토리지에는 로컬 스토리지(Local Storage)와 세션 스토리지(Session Storage) 두 가지가 있다.

로컬 스토리지는 브라우저를 종료해도 저장 데이터가 그대로 남아 있지만, 세션 스토리지는 브라우저가 종료되는 순간 데이터가 전부 소멸된다.

 

# 로컬 스토리지(Local Storage)

로컬 스토리지는 window.localStorage에 위치한다.

// localStorage에 데이터 저장하기
localStorage.setItem('name', 'inyong');
localStorage.setItem('age', 27);

// localStorage에 데이터 가져오기
localStorage.getItem('name') // 'inyong'
localStorage.getItem('age') // 27

// localStorage에 데이터 삭제하기
localStorage.removeItem('name');
localStorage.getItem('name') // null

// localStorage에 데이터 전체 삭제하기
localStorage.clear();

 

# 세션 스토리지(Session Storage)

세션 스토리지도 로컬 스토리지와 사용법이 같다.

 

#  webStorage 확인하는 법