.png){kind=logo}
1. Application Panel의 기능
브라우저 저장소, IndexedDB 또는 Web SQL 데이터베이스, 로컬 및 세션 스토리지, 쿠키, 애플리케이션 캐시, 이미지, 글꼴 및 스타일시트를 포함하여 로드된 모든 리소스를 검사한다.
- Debug Progressive Web Apps(프로그레시브 웹 앱 디버그)
- Inspect and Manage Storage, Databases and Caches(스토리지, DB 및 캐시 검사 및 관리)
- Inspect and Delete Cookies(쿠키 검사 및 삭제)
2. Application Panel의 구성
- Application
- Manifest
- Service Workers
이것은 등록된 service workers가 없고 등록된 서비스 워커가 있을 것으로 예상한 경우 수행할 작업에 대한 몇 가지 조언을 제공합니다 - Storage
- Local Storage
- Session Storage
- DB
- Web SQL
- Cookies
- Trust Token - Cache
- Background Services
- Frames
- Font, Image, Script, Style Sheet
3. Local Storage, Session Storage, Cookie 차이점은?
web storage의 개념은 키와 값을 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회하는 패턴이다.
그리고 local storage(영구 저장소)/session storage(임시저장소)를 따로 두어 데이터의 지속성을 구분할 수 있어서 때에 따라 필요한 환경에 맞는 선택이 가능하다.
먼저 크게 나눠서 web storage와 cookie를 비교해보면
- 쿠키는 매번 서버로 전송된다.
- 웹 사이트에서 쿠키를 설정하면 이후 모든 웹요청은 쿠키정보를 서버로 전송한다.
- 하지만 web storage는 저장된 데이터가 클라이언트에 존재할뿐 서버로 전송은 이루어지지 않아서 네트워크 트래픽을 줄여줄수있다.
- Web storage는 용량의 제한이 없다.
- 하지만 쿠키는 개수와 용량에 있어 제한이 있다. 하나의 사이트에서 저장할 수 있는 최대 쿠키 수는 20개이다. 그리고 하나의 사이트에서 저장할 수 있는 최대 쿠키 크기는 4KB로 제한되어 있다.
- 영구 데이터 저장이 가능하다.
- 쿠키는 만료일자를 지정하게 되어 있어 언젠가 제거된다. 만료일자로 지정된 날짜에 쿠키는 제거되는 것이다.
WebStorage는 만료기간의 설정이 없다. 즉, 한번 저장한 데이터는 영구적으로 존재하는 것이다.
<WebStorage와 쿠키의 결론>
WebStorage와 쿠키의 차이점에 대해서 WebStorage가 특별히 좋은 이유는 없다고 봐도 무방하다. 다만 한가지 매번 서버로 전송되지 않는다는 특징은 꽤나 유용하다.
Local storage와 session storage의 차이점
데이터 유지 측면
- Session storage는 데이터가 지속적으로 보관되지 않는다.현재 페이지가 브라우징 되고 있는 브라우저 컨텍스트 내에서만 유지가 가능하다. (컨텍스트 : 호출, 응답 간의 환경 정보)
- Local storage는 브라우저를 종료해도 데이터는 보관되고 다음 접속에도 그 데이터를 사용할수 있지만 Session storage는 브라우저가 종료되면 데이터도 같이 사라진다.
4. Local Storage, Session Storage, Cookie 사용 예시
Local Storage
<자동 로그인>
브라우저의 "탭"에 따라 각각 로컬스토리지(저장소)가 존재
저장한 데이터를 (명시적으로) 지우지 않는 이상 영구적으로 보관이 가능하다.
Session Storage
<입력 폼 정보, 비로그인 장바구니>
전역적인 공간이 아닌 브라우저 영역에 저장.
현재 페이지가 브라우징되고 있는 브라우저 컨텍스트 내에서만 데이터가 유지.
세션 스토리지는 웹페이지의 세션이 끝날 때 저장된 데이터가 지워진다.
Cookie
<팝업창>
특정 웹사이트가 어떠한 내용을 표시하기 위해 갑자기 생성 되는 새 창을 말한다.
화면 이동이 있거나 영구적으로 저장해야 하는 경우 DB에 저장을 하거나 임시적으로 저장하고 싶은 경우 쿠키(cookie)를 사용한다.
cookie의 또 다른 용도는 사이트에서 제한된 인터넷 사용 기록을 기반으로 사용자 경험을 개선하는 것입니다.
5. Local Storage에 특정 데이터를 저장하고 가져오는 법
localStorage는 딕셔너리 형태로 데이터가 저장된다.
localStorage에 접근할 수 있는 메서드는 다음 4가지가 있다.
- method
setitem() 로컬 스토리지에 키, 값을 추가한다.
getitem() 키에 맞는 값을 찾는다.
removeitem() 키에 맞는 값을 삭제한다.
clear() 로컬 스토리지에 저장된 모든 내용을 삭제한다. - localStorage
storage{length:0} ← 콘솔에 찍으면 스토리지에 없다고 나온다.
storage{key:"value",length:1} - locaStorage에 저장
localStorage.setitem(‘key’,‘value’); - localStorage 데이터 호출
localStorage.getItem(”key”); - etc
localStorage.getItem("key")
sessionStorage.getItem("key")
document.cookie
