개발자 도구 Application

Application 패널의 기능은?

브라우저 저장소의 기능을 담당한다.

현재 로딩된 웹 페이지에서 사용된 리소스(이미지, DB, 로컬 및 세션 스토리지, 쿠키, 애플리케이션 캐시 등)를 열람할 수 있는 패널이다.

스토리지, DB 및 캐시 검사 및 관리, 쿠키 검사 및 삭제, 리소스 검사를 수행한다.

 

개발자 도구에서 >> 를 누르면 Application이 보인다.

 

Local Storage, Session Storage, Cookie 차이점은?

공통 사항

: 브라우저의 저장소. 값의 성격에 따라 다르게 사용이 된다. key - value 페어 객체 형태로 데이터가 저장된다.

 

Web Storage는 서버가 아닌, 클라이언트에 데이터를 저장할 수 있도록 지원하는 HTML5의 새로운 기능이다.

 

Web Storage와 cookie의 차이점

• 쿠키는 매번 서버로 전송된다.

웹 사이트에서 쿠키를 설정하면 이후 모든 웹 요청은 쿠키정보를 포함하여 서버로 전송된다. Web Storage는 저장된 데이터가 클라이언트에 존재할 뿐 서버로 전송은 이루어지지 않는다. 이는 네트워크 트래픽 비용을 줄여 준다.

• 영구 데이터 저장이 가능하다

쿠키는 만료일자를 지정하게 되어 있어 언젠가 제거된다. 만료일자로 지정된 날짜에 쿠키는 제거되는 것이다. 만약 만료일자를 지정하지 않으면 세션 쿠키가 된다. 만일 영구 쿠키를 원한다면 만료일자를 굉장히 멀게 설정하여 해결할 수 있다. WebStorage는 만료기간의 설정이 없다. 즉, 한번 저장한 데이터는 영구적으로 존재하는 것이다.

 

무슨 저장소를 사용할지는 내 기획에 따라 다르다. 자신의 기획의도에 맞게 사용하면 된다. 근데 비밀번호같은 정보는 위험해서 web Storage에 저장하지 않는게 좋다. 클라이언트들이 접근할 수 있으니까 말이다!

 

웹 스토리지 (web storage)

Local Storage

: 브라우저를 종료해도 유지되는 데이터로, 사용자가 지우지 않는 이상 데이터의 영구성이 보장된다.

: 지속적으로 필요한 정보를 저장하기에 좋다. (ex. 자동 로그인 등)

 

Session Storage

: 윈도우나 브라우저 탭을 닫을 경우 사라진다. 즉 데이터의 영구성을 보장하지 않는다.

: 잠시 동안 필요한 정보를 저장하기에 좋다. (ex. 일회성 로그인 등)

세션과 로컬의 차이점은 
로컬은 지속성(보존)을 가지기 때문에 같은 도메인이라면 여러 창을 켜도 같은 스토리지를 사용하는 것입니다.
세션은 각 세션마다 새로운 스토리지를 사용하고 폐기합니다.

쿠키

Cookie

: 대략 4KB까지의 데이터를 저장할 수 있으며 최대 300개까지 저장할 수 있고 유효 기간이 존재한다. 또한 이 유효기간은 기간을 설정할 수 있다.

: 사이트에서 방문한 페이지를 저장하거나 유저의 로그인 정보를 저장하는 등, 다양한 방법으로 사용이 되지만 문자열만 저장할 수 있다는 제한이 있다.

 

Local Storage, Session Storage, Cookie 사용 예시

Local Storage

: 저장하려는 데이터의 성격이 브라우저를 사용하면서 지속적으로 사용해야 하는 종류라면 로컬 데이터

→ 자동 로그인 정보

Session Storage

: 브라우저를 닫을 경우 사라지니 영구성을 보장하지 않아도 되는 데이터 종류 , 잠깐 동안 필요한 정보

→ 일회성 로그인 / 비로그인 장바구니 기능

Cookie

: Cookie는 사이트에서 로그인 상태를 유지하고 사이트 환경설정을 기억하는 용도로 사용

→ 팝업창에서 “오늘 하루 동안 보지 않기“, “일주일 동안 보지 않기“같은 환경설정 기능 (기간설정을 할 수 있기 때문에)

Local Storage 에 특정 데이터를 저장하고 가져오는 방법 

localStorage.getItem(key)

localStorage.getItem(key)는 key의 데이터를 조회한다.

localStorage.setItem(key, value)

localStorage.setItem(key, value)는 key에 저장되어있는 내용을 value로 설정한다.

localStorage.clear()

localStorage.clear()는 스토리지 전체를 비워준다.