Browser - Web Storage란 (브라우저 저장소)

 

 

 

 

Web Storage 의 존재와 사용은 해봤다. 그런데 어떻게 사용해야 하는지의 개념은 솔직하게 잘 몰랐다.

어떻게를 알려면 왜 등장했는지부터 알아야 한다. 정체성부터 이해해야 전력배치를 잘 할 수 있기 때문이다.

 

 

웹에서 클라이언트에만 저장하는 데이터들이 있다 (자급자족, 클라이언트에서 저장해서 클라이언트에서 사용하는)

이를 도와주는 친구들이 Cookie 와 Web Storage 이다. (쿠키랑 스토리지에 데이터를 저장해놓고 꺼내다 쓰는)

 

 

그전에 쿠키🍪 이야기가 빠질 수 없다

 

 

쿠키 는 client(브라우저)에 저장할 수 있는 데이터이다

만료일자를 지정해주면 지속적쿠키🍪라고 불렸으며, 지정안해주면 세션쿠키🍪(브라우저종료시 삭제)라는 별명도 얻었다

 

하지만 이녀석은... 🥲

문자열만 저장이 되었고, 용량이 제한되었으며(최대300개, 도메인당 20개, 4kb)

매번 서버로 전송이 되어 서버를 귀찮게 만들었다

 

 

흠...? 불편한데...? 🤔

 

 

 

그래서 HTML5 스펙를 창조할 때, Web Storage 라는 자료 구조가 추가되었다

짧게 말해서 용량걱정없이 객체로 데이터를 저장할 수 있게  된 것이다

 

---

 

 

Web Storage 란

- Web Storage는 객체정보를 저장할 수 있다

- Web Storage는 용량의 제한이 없다

- Web Storage는 영구 데이터 저장이 가능하다

- Web Storage는 도메인 별로 생성된다.

- Local Storage 와 Session Storage로 구성되어 있다

 

 

Local Storage

 

데이터를 직접 삭제하기 전까지는 영구적 보관이 가능하다

도메인 별로 생성되기 때문에 같은 도메인끼리는 여러 브라우저에서도 데이터를 공유한다

Windows 전역객체의 Local Storage 컬렉션을 통하여 저장과 조회가 이루어 진다 

 

 

 

Session Storage

 

브라우저를 종료하면 데이터 삭제가 된다

도메인 별로 생성되지만 다른 브라우저에서 데이터를 공유 X 하지 않는다

→ Session Storage 는 브라우저 컨텍스트 내에서 생성되고 유지되기 때문에 별개의 영역으로 구분되어지기 때문이다

Windows 전역객체의 Session Storage라는 컬렉션을 통하여 저장과 조회가 이루어진다

chrome - 개발자도구 - application 탭에서 확인 가능하다