about. Application panel

개발자 도구란 브라우저에서 제공하는 하나의 도구로서 웹 사이트를 즉각적으로 수정하고 문제 발생 시 원인을 파악하여 빠른 속도로 대응할 수 있도록 도와준다.

1. Application panel의 기능

브라우저 저장소의 기능을 담당한다.
즉, 현재 로딩된 웹 페이지에서 사용된 모든 리소스(이미지, DB, 로컬 및 세션 스토리지, 쿠키, 애플리케이션 캐시 등)를 검사할 수 있는 패널이다.

• 프로그레시브 웹 앱 디버그

• 스토리지, DB 및 캐시 검사 및 관리

• 쿠키 검사 및 삭제

• 리소스 검사

Application패널에서는 데이터 열람이 가능하고, 저장소의 정보의 수정이 가능하다.

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

📌Storage의 공통 사항

스토리지는 브라우저의 저장소! 값의 성격에 따라 다르게 사용이 된다. 두 스토리지 모두 html5 에서 새로운 저장 옵션으로 도입이 된 개념이다. 그 전에는 쿠키라는 저장소를 사용했었다.
key - value 페어 객체 형태로 데이터가 저장된다.

📌Storage 중 Local과 Session의 차이점

로컬 스토리지 : 사용자가 지우지 않는 이상 데이터의 영구성이 보장된다.

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

📌쿠키(cookie)와 WEB Storage의 차이점

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

2.단순 문자열을 넘어(스크립트) 객체정보를 저장할 수 있다.
문자열 기반 데이터 이외에 체계적으로 구조화된 객체를 저장할 수 있다는 것은 개발 편의성을 제공해주는 주요한 장점이 된다. 브라우저의 지원 여부를 확인해 봐야 하는 항목이다.

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

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

WebStorage와 쿠키의 차이점에 대해서 WebStorage가 특별히 좋은 이유는 없다고 봐도 무방하다. 다만 한가지 매번 서버로 전송되지 않는다는 특징은 꽤나 유용하다.

3.Local Storage, Session Storage, Cookie의 사용예시

Local Storage
지속적으로 필요한 데이터(ex. ID 저장, 비회원 카트)
UI 정보들(ex. 에어비앤비, 스카이스캐너 인천공항 - 베네치아 검색하면 그대로 유지)

Session Storage :
잠깐 동안 필요한 정보
ex. 보안이 중요한 정보 (ex. 은행 사이트), specific한 유저 정보, 언어 선택 등

Cookie
직접적이지 않은 데이터
오늘만 하는 이벤트 팝업, 서비스 약관에 동의했는지 등.

주의할 점! 
비밀번호와 같은 중요정보는 스토리지에 저장하면 위험합니다. 로컬스토리지나 세션스토리지는 클라이언트 사이드 이기 때문에 쉽게 해킹당할 수 있기 때문입니다. 사이트/서비스의 특성, 회사의 방침에 따라 user data 를 어떻게 처리 하는지 전부 다르기 때문에 서비스 특성이나 기획에 맞게 적절하게 처리합니다.

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

데이터 저장
localStorage.setItem("key", "value")
sessionStorage.setItem("key", "value")
setcookie("key", "value", "지속시간 (초단위)")

데이터 호출
localStorage.getItem("key")
sessionStorage.getItem("key")
document.cookie

기타 메소드
외에도 removeItem, clear 등등의 공통 메소드 존재