Local Storage 와 Session Storage

 

Cookie와 Session 공부를 하다가 프론트엔드 개발자는 Local Storage 와 Session Storage에 대해서 필수로 학습한다는 사실 알게되었다.

 

나중에 프론트 개발자와 협업을 하게 될 경우 해당 storage에 대해서 간략하게 나마 알고 있다면

소통하는데에 더욱 용이하지 않을까 싶어서 구글링을 해보았다.

먼저, 쿠키에 대한 기본적인 개념을 짚고 넘어가자.

 

 

쿠키란?

먼저 기본적으로 Cookie는 클라이언트에 저장될 목적으로 생성한 작은 정보를 담은 파일,

크롬 기준으로 '개발자도구' 탭을 열어 Application - Storage - Cookies 에서 확인이 가능하다.

또한 그 위에 Local Storage 와 Session Storage가 있다.

이제 이 두개의 저장소에 대해 살펴보자

 

 

---

 

Local Storage 와 Session Storage 는 Web Storage Object 이다.
이 둘은 브라우저 내에 key-value 쌍을 저장 할 수 있도록 한다.

두 Storage Object는 동일한 메서드와 프로퍼티를 제공한다.
Map과 유사하지만, index를 사용해 key에 접근할 수 있다는 점에서 차이가 있다.

Session Storage 객체는 local Storage에 비해 자주 사용되지는 않는다.
그 이유는 상대적으로 훨씬 제한적이기 때문이다.

 

"쿠키를 사용하면 브라우저에 데이터를 저장할 수 있는데, 왜 또 다른 객체를 사용하여 데이터를 저장할까?"

 

 

그 이유는 쿠키와 다르게 Web Storage Object는 네트워크 요청 시 서버로 전송되지 않기 때문에 쿠키보다 더 많은 자료의 보관이 가능하기 때문이다. 대부분의 브라우저는 2MB 혹은 그 이상의 객체를 저장할 수 있도록 한다. 

 

 

쿠키와 다른 점으로, 서버가 HTTP header를 통해 Web Storage Object를 조작할 수 없다는 점이다. 

이러한 Web Storage Object들은 자바스트립트 내에서 수행된다.

 

 

Web Storage Object는 도메인과 프로토콜 그리고 포트로 정의되는 Origin에 묶여있어, 해당 정보가 다르면 

해당 Web Storage Object 데이터에 접근할 수 없다.

→ Origin (Domain/Port/Protocol)

 

 

두 Storage Object는 동일한 메서드와 프로퍼티를 제공한다.

• setItem(key, value)
• getItem(key)
• removeItem(key)
• clear()
• key(index)
• length

Map과 유사하지만, index를 사용해 key에 접근할 수 있다는 점에서 차이가 있다.

 

 

Local Storage의 주요기능

• origin 같은 경우 데이터는 모든 탭과 창에서 공유된다.
• 브라우저나 OS가 재시작되어도 데이터를 파기하지 않는다.

localStorage.setItem('test', 100);

위 코드를 실행하고, 브라우저를 닫고 다른 창에서 아래 코드를 실행해도 결과가 1이 나온다.

alert( localStorage.getItem('test') ); // 100

그 이유는,

Origin (Domain/Port/Protocol) 만 같다면 url 경로는 달라도 동일한 결과를 볼 수 있기 때문이다.

즉, Local Storage는 동일한 origin을 가진 모든 창에서 공유된다는 특징이 있다.

 

 

 

Session Storage 

Session Storage 객체는 local Storage에 비해 자주 사용되지는 않는다.

그 이유는 상대적으로 훨씬 제한적이기 때문이다.

 

Session Storage는 현재 떠 있는 탭 내에서만 유지가 됩니다.

• 같은 페이지라도 다른 탭에 있으면 다른 곳에 저장된다.
• 페이지를 새로 고침할 때 데이터는 사라지지 않습니다.
• 그러나 탭을 닫고, 새로 열 때는 데이터가 휘발됩니다.

 

 

 

요약

Local Storage	Session Storage
Origin이 같은 탭, 창 전체에서 공유	Origin이 같은 브라우저 탭, iframe에서 공유
브라우저를 껐다가 켜도 유지	페이지를 새로고침해도 유지, 탭이나 브라우저 열고 닫을 경우 휘발