웹 저장소 비교: 세션 스토리지, 로컬 스토리지, 쿠키의 차이점과 활용 방법

1. 로컬 스토리지

window.localStorage 에 위치

값으로는 문자열, 불린, 숫자, null, undefined 모두 저장할 수 있지만 문자열로 변환됨

localStorage.setItem('key', 'value) // 로 저장 localStorage.getItem('key') // 로 조회 localStorage.removeItem('key') // 해당 키 삭제 localStorage.clear() // 스토리지 전체 삭제

[object 생성자] 형으로 저장된다.

한번에 통째로 저장하려면 JSON.stringify() 해야함

받을때는 JSON.parse()

​

데이터를 지우기 전까진 영구적으로 계속 저장되어 있음!!

최대 5MB의 정보를 저장할 수 있다.

​

2. 세션 스토리지

window.sessionStorage 에 위치

로컬 스토리지와 모든 메소드는 같음 (setItem, getItem, removeItem, clear)

​

HTTP Session id를 식별자로 구별하여 데이터를 사용자의 브라우저에 쿠키형태가 아닌 접속한 서버 DB에 정보를 저장 한다. 클라이언트는 HTTP Session id를 쿠키로 메모리 저장된 형태로 가지고 있다. 메모리에 저장하기 때문에 브라우저가 종료되면 삭제된다.

​

3. 쿠키

쿠키는 클라이언트에 대한 정보를 이용자의 PC 하드디스크에 보관하기 위해서 웹사이트에서 클라이언트의 웹 브라우저에 전송하는 정보이다. 만료일이 있을 경우, 지정일이 되면 디스크에서 삭제된다.

​

쿠키는 처음부터 서버와 클라이언트 간의 지속적인 데이터 교환을 위해 만들어졌기 때문에 서버로 계속 전송이 된다. 그렇기 때문에 데이터 낭비가 발생할 수 있다. 하지만 대부분의 브라우저를 지원한다는 장점이 있다.

​

사실 쿠키의 유형은 네 가지로, 만료일이 없는 Session cookie와 만료일이 있는 Persistent cookie, Https에서만 쓰이는 Secure cookie, 배너 띄울 관리 시 유입경로를 추적하기 위한 Third-Party cookie가 있다. (최대 4KB)

​

​

| 차이점 요약

로컬 스토리지	데이터 보관 영구적
세션 스토리지	세션 종료시 정보 삭제 (웹브라우저 닫을때)
쿠키	만료 기한 있고 서버와 지속적 통신

​

+) 추가

사용자가 로그인을 하고 로그아웃을 할 때까지만 사용되어야 하는 값은 임시적으로 필요하지만 로그인 중에는 지속성 있게 유지가 될 필요가 있습니다. 아주 오래전엔 그러한 값들을 쿠키로 관리했습니다. 하지만 쿠키는 브라우저 내의 다른탭끼리도 공유가 되므로 동일 사이트에 다른 사용자로 로그인 할 경우 문제가 발생하기 쉬웠습니다. 세션 스토리지는 탭별로 데이터를 관리할 수 있고 탭이 닫혔을때 모든 데이터는 삭제됩니다.