localStorage & sessionStorage

우선, 로컬스토리지와 세션스토리지는 익히 들어보았지만,

 

웹 스토리지란 단어를 처음 들어봤다.

 

웹 스토리지란 그래서 뭘까?? 

 

웹 스토리지 API는 기존 쿠키(cookie)의 문제점을 극복하기 위해 웹 브라우저가 직접 데이터를 저장할 수 있게 해준다고 한다.

 

HTML5 이전에는 응용 프로그램이 데이터를 서버에게 요청할 때마다 매번 쿠키에 그 정보를 저장했지만,

웹 스토리지는 사용자 측에서 좀 더 많은 양의 정보를 안전하게 저장할 수 있도록 해주고,

최소 5MB 이상의 많은 공간을 가지고 있으며, 이 정보는 절대 서버로 전송되지 않는다고 한다.

코딩교육 티씨피스쿨

웹 스토리지라는 개념 안에 로컬 스토리지와 세션 스토리지가 포함이 되는걸 TCP를 를 통해 확인했다.

 

웹 스토리지를 왜 사용해야 하는가?

 

위에서도 언급했듯, 예전에는 데이터가 필요할 때마다 매번 쿠키에 정보를 저장해서 서버와 통신을 해야했다.

즉, 클라이언트의 상태를 보존하지 않는다고 볼 수 있다.

클라이언트에서 필요한 상태를 클라이언트 자체에 저장해두고 꺼내 쓸 수 있는, 쿠키와 다른 장점이 있기에 사용한다.

또한 쿠키(약 4kb)에 비해 넉넉한 용량을 보장한다. (약 5mb)

 

 

장점만 있는가..?? 

 

당연히 그럴리가 없다.

 

HTML5를 지원하지 않는 브라우저에서는 사용이 불가능하다.

현재 지원되는 브라우저는 위 TCP 링크를 통해 확인 가능하다.

 

 

그렇다면 localStorage와 sessionStorage의 차이점은 뭘까?

 

localStorage는 브라우저를 껐다 켜도 남아있는 반면,

sessionStorage는 브라우저를 종료하면 사라진다는 것이 가장 큰 차이이다.

 

=> 용도에 따라 다르게 사용하는게 좋다.

sessionStorage는 잠깐의 정보를 저장하기에 용이하다.

예를 들어, 비회원 장바구니, 회원가입 입력폼, 일회성 로그인에 적합하고,

localStorage는 자동 로그인 등에 적합하다.

 

 

그럼 클라이언트 개발자는 앞으로 쿠키를 사용하지 않고 웹 스토리지만 이용해서 데이터를 보관해도 되는가?

 

이것도 역시 당연히 그럴리가 없다 ㅋㅋㅋ

 

용도에 따라 다르게 사용해야한다가 정답이라고 생각한다.

어떠한 기준점에 따라 쿠키와 웹 스토리지를 섞어서 사용하는게 좋을 것 같다.

예를 들어,

데이터의 용량이 얼마나 될지,

서버에게 매번 요청을 해야하는 데이터인지 등 판단하여 사용하는 것이 좋을 것 같다.

 

그렇다면 어떻게 사용해야 하는지 알아보자.

 

setItem(key, value) – 키-값 쌍을 보관합니다.
getItem(key) – 키에 해당하는 값을 받아옵니다.
removeItem(key) – 키와 해당 값을 삭제합니다.
clear() – 모든 것을 삭제합니다.
key(index) – 인덱스에 해당하는 키를 받아옵니다.
length – 저장된 항목의 개수를 얻습니다.
Object.keys를 사용해 키 전체를 얻을 수 있습니다.
객체 프로퍼티처럼 키에 접근할 수 있는데, 이 경우 storage 이벤트가 발생하지 않습니다.
storage 이벤트:

setItem, removeItem, clear를 호출할 때 발생합니다.
연산(key/oldValue/newValue)과 관련된 데이터 전체와 문서 url, 스토리지 객체 storageArea를 가지고 있습니다.
이벤트가 생성된 곳을 제외하고 스토리지에 접근하는 모든 window 객체에서 일어납니다(sessionStorage는 탭 내에서, localStorage에서는 전역에서).

 

 

출처: https://ko.javascript.info/localstorage