Dev Tool(개발자 도구) Application panel

애플리케이션 탭에서는 웹 페이지가 웹 애플리케이션으로 기능하기 위해 필요한 내용들을 보여준다. 예전 웹 페이지에서는 오직 쿠키로만 정보를 저장하던 것과 달리, 다양한 웹 저장소가 추가되어 더 안전하고 빠른 형태로 정보를 읽고 쓸 수 있게 되었다.

• 저장소
• 프로그레시브웹앱 디버깅
• 스토리지, DB, 캐시 검사 및 관리
• 쿠키 검사 및 삭제

Cookie

• 클라이언트 로컬(하드)에 저장되는 key, value값이 들어 있는 데이터 파일이다.
• 서버에 저장되는 것이 아니기 때문에 보안과 상관없는 정보들에 사용한다.
• 재요청 시 저장된 값을 참조, 재사용 한다.
• 사용자의 하드에 저장되기 때문에 공공장소에서 해킹 등의 악용이 가능하다.
• 클라이언트에 300개, 하나의 도메인에 20개의 값만 저장이 되며 하나의 쿠키는 4KB까지 저장 가능하다.
• 이름, 값, 만료 날짜(저장 기간), 경로 정보가 있어야하며 일정 시간 동안 데이터를 저장할 수 있다.
• 같은 도메인 상에서 쿠키의 값은 공유된다.
• 클라이언트가 요청하지 않아도 브라우저 요청이 있을 경우 Request Header에 넣어서 자동으로 서버에 전송한다.
• 문자열만 저장할 수 있다는 제한이 있다.

Cookie를 사용하는 이유

사용자의 하드에 정보를 저장하는 이유는 http 프로토콜이 stateless 프로토콜이기 때문이다. http는 웹 브라우저가 웹 서버에 접속을 해서 어떤 문서나 파일을 요청하면 웹 서버는 요청 받은 내용을 보내준 다음 접속을 끊는다. 즉, 접속을 한 상태(state)가 지속되지 않고 요청된 것만 처리한 뒤 연결을 끊는다. 그러므로 웹서버는 일단 요청된 내용들을 클라이언트에 보내고 나면 그 뒤 사용자가 접속을 하고 있는지 어떤지 알 수 없다. 나아가, 예전에 접속했던 클라이언트가 또 접속을 한 것인지 아닌지 등은 더더욱 알 수 없다. 그런데 웹 사이트를 운용하는 측에서는 어떤 사용자가 다시 방문을 했는지와 같은 정보가 필요했고 바로 이런 점을 해결하기 위해, 즉 stateless한 http의 특징을 커버하기 위해 등장한 것이 쿠키이다.

Cookie의 사용

• 사용자가 어떤 페이지를 읽었는지, 로그인 아이디가 무엇인지, 이메일 주소가 무엇인지, 사용자가 어떤 물품을 주문했는지, ip 주소가 무엇인지, 어떤 사이트를 거쳐서 우리 사이트로 왔는지 기록
• 서버에서 각 클라이언트를 식별할 특별한 정보를 기록
• 사이트에서 제한된 인터넷 사용 기록을 기반으로 사용자 경험을 개선
• 팝업창 일주일간 보지 않기를 체크할 경우 쿠키의 만료기간이 일주일 후로 설정된 것으로 볼 수 있다.

Cookie와 Web Storage의 차이점

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

• 단순 문자열을 넘어(스크립트) 객체정보를 저장할 수 있다.
  문자열 기반 데이터 이외에 체계적으로 구조화된 객체를 저장할 수 있다는 것은 개발 편의성을 제공해 주는 주요한 장점이 된다.

• 용량의 제한이 없다.
  쿠키는 개수와 용량에 있어 제한을 걸어 두고 있다. 하나의 사이트에서 저장할 수 있는 최대 쿠키 수는 20개이다. 그리고 하나의 사이트에서 저장할 수 있는 최대 쿠키 크기는 4KB 로 제한되어 있다. Web Storage 는 이러한 제한이 없다. 그러나 쿠키도 하위키를 이용하면 이러한 제한을 일부 해소할 수 있다. 그리고 대부분의 시나리오에서 쿠키의 제한으로 까지 데이터를 저장할 일이 없다.

• 영구 데이터 저장이 가능하다.
  쿠키는 만료일자를 지정하게 되어 있어 언젠가 제거된다. 만료일자로 지정된 날짜에 쿠키는 제거되는 것이다(만료일자를 지정하지 않으면 세션 쿠키가 된다). 만일 영구 쿠키를 원한다면 만료일자를 굉장히 멀게 설정하여 해결할 수 있다.

쿠키 읽기와 쓰기

document.cookie 프로퍼티를 이용하면 브라우저에서도 쿠키에 접근할 수 있다.
document.cookie에 값을 할당하면, 브라우저는 이 값을 받아 해당 쿠키를 갱신한다. 이때, 다른 쿠키의 값은 변경되지 않는다.

document.cookie = "user=John"; // 이름이 'user'인 쿠키의 값만 갱신함

Local Storage

• 키/값 쌍으로 손쉽게 데이터를 읽고 쓸 수 있다. 웹 브라우저마다 도메인별로 할당된 저장 공간의 크기가 다르지만 일반적으로 10 MiB까지 허용된다.
• 데이터는 도메인 단위로 공유되어, 같은 브라우저 내의 서로 다른 창/탭에서도 같은 데이터를 공유할 수 있다.
• 자동 로그인

Session Storage

• 로컬 저장소와 기능적으로는 같지만, 사용자가 명시적으로 삭제하지 않으면 지워지지 않는 로컬 저장소와는 달리, 세션 저장소는 브라우저가 닫힐 때 같이 제워진다.
• 로컬 저장소와 달리, 같은 도메인일 경우에도 창/탭 단위로 서로 다른 데이터를 사용하게 된다.
• 일회성 로그인, 은행 로그인, 입력 폼 저장

Local Storage와 Session Storage의 메서드와 프로퍼티

• setItem(key, value) – 키-값 쌍을 보관합니다.
• getItem(key) – 키에 해당하는 값을 받아옵니다.
• removeItem(key) – 키와 해당 값을 삭제합니다.
• clear() – 모든 것을 삭제합니다.
• key(index) – 인덱스(index)에 해당하는 키를 받아옵니다.
• length – 저장된 항목의 개수를 얻습니다.

참고:

• 크롬 개발자 도구 101
• 쿠키 vs 로컬스토리지: 차이점은 무엇일까?
• https://okayoon.tistory.com/entry/브라우저-쿠키Cookie-세션스토리지Session-Storage-로컬스토리지Local-Storage [Zzolab Blog :)]
• 로컬스토리지, 세션스토리지
• https://kcizzang.tistory.com/entry/HTML-쿠키-COOKIE-기초-정리?category=24043 [정윤문경아빠의 이야기]
• https://kcizzang.tistory.com/entry/SessionStorage-와-LocalStorage-차이점?category=24043 [정윤문경아빠의 이야기]