브라우저 : 웹스토리지 (web storage) - 로컬스토리지(local storage), 세션스토리지(session storage) / 쿠키(cookie) 비교

1) Application(응용프로그램) 패널이란?

 

크롬 Ver.

브라우저에서 (mac 단축키) cmd + opt + i => application

 

 

브라우저 저장소의 기능

웹 SQL 데이터베이스, 로컬 및 세션 스토리지, 쿠키, 어플리케이션 캐시, 폰트, 스타일시트를 포함한 로딩된 모든 리소스를 검사

 

2) Cookie 란?

쿠키는 웹사이트 접속시 접속자의 개인장치에 다운로드 되고 브라우저에 저장되는 작은 텍스트 파일입니다. 쿠키는 사용자가 방문한 웹사이트에서 사용자의 브라우저에 전송하는 작은 텍스트 조각입니다.

 

브라우저는 그 데이터 조각들을 저장해 놓았다가, 동일한 서버에 재 요청 시 저장된 데이터를 함께 전송합니다.

 

쿠키가 있으면 웹사이트에서 사용자의 방문에 관한 정보를 기억하여 다음번에 사이트에 방문했을 때 번거로운 작업을 피하고 더 유용하게 사이트를 활용할 수 있습니다.

 

 

웹 사이트 로딩 시 client - server 구조에서, 정보 저장은 서버단의 Database 에 진행되게 됩니다.

그러나 일부 정보를 상태 유지하기 위해 client단에 저장할 수 있는 기능을 만들었습니다.

그것이 web storage !

 

 

쿠키에 대한 정보를 HTTP Header(Set-Cookie)에 매번 추가해서 보내서 상당한 트래픽 발생으로 성능이 다운 되었었기 때문에 .

web storage를 통한 일부 정보의 상태 유지를 통해 Server와의 불필요한 통신 감소.

 

 

 

3) Storage와 Cookie

	Web Storage ( local storage, session storage )	Cookie
데이터 저장 방식	key-value방식으로 데이터를 다룬다. ex) localstorage['name'] = apple	String으로 Value를 다룬다.  -> 안정적이지 않음. ex) Cookie:name=apple
데이터 저장 공간	10MB / 5MB	4KB (한정적)
기한	Local Storage : 저장한 데이터를 명시적으로 지우지 않는 이상 영구보관. JavaScript를 통해서만 지워진다. Session Storage :  세션에 대해서만 데이터를 저장한다.	마감기한이 있는 저장소. 만료 기한이 있어 기간이 지나면 삭제, 기한을 정할 수 도 있다. ex) "일주일 동안 보지 않기" 와 같은 옵션 그 정보를 쿠키에 저장했다가 그 시간이 지나면 다시 활성화를 해주는 것.
서버와 연동	서버와 연동 X	서버와 연동

 

4) LocalStorage와  SessionStorage

 

	Local Storage	Session Storage
기한	브라우저에 데이터 영구 보관. 직접 지우기 전까지. 브라우저나 OS가 재시작하더라도 데이터가 파기되지 않음.	창(또는 탭)이 꺼지면 데이터도 같이 소멸
사용예시	보안적으로 민감하지 않은 데이터, 로그인정보 인터넷 연결이 잘 유지되지 않는 지역에서 수집된 데이터를 보호하고 저장하는데 사용	휘발성 데이터 저장, 일회성 로그인