[web] Application panel

Application panel (어플리케이션 패널)

 

Application 패널의 기능은? 

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

현재 로딩된 웹 페이지에서 사용된 리소스(이미지,스크립트,데이터)를 열람할 수 있는 패널이다.

데이터베이스, 로컬 및 세션 스토리지, 쿠키, 어플리케이션 캐시, 폰트, 스타일시트를

포함한 로딩된 모든 리소스를 검사한다.

 

 

local storage와 session storage, cookie의 차이점은?

 

local storage와 session storage의 공통점은

키 : 밸류 값으로 저장한다는 것이다.

 

그럼 차이점은 무엇일까?

이둘 스토리지의 차이점은 저장한 범위내에서 얼마나 오래 보존되냐에 따라있다.

세션스토리지는 웹페이지의 세션이 끝날때 저장된 데이터가 지워지는 반면에

로컬스토리지는 웹페이지의 세션이 끝나더라도 데이터가 지워지지 않는다.

Cookie는 사이트에서 로그인 상태를 유지하고 사이트 환경설정을 기억하는 용도로 사용.
팝업창에서 "오늘 하루 동안 보지 않기", "일주일 동안 보지 않기"같은 기능에 필요.

 

 

 

Local Storage, Session Storage, Cookie  어떤 데이터를 어디에 저장하면 좋을까?

 

 

Local Storage는 로그인 ID, PASSWORD 또
인터넷이 연결되어 있지 않아도 데이터 저장이 가능하다.

 

 

Session Storage는 비로그인 장바구니 기능과

사용자가 '입력폼'을 입력하다가 페이지에서 벗어난 경우 백업/복구가 가능하다.

 

 

Cookie는 사이트에서 로그인 상태를 유지하고 사이트 환경설정을 기억하는 용도로 사용한다.
팝업창에서 "하루 동안 보지 않기", "일주일 동안 보지 않기"같은 기능에 필요하다.

 

 

 

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

 

[키 : 벨류 ] 값 확인 -> 콘솔창 출력

 

localStorage.key(index)localStorage.key(index)는 index번째 데이터명을 불러온다.localStorage.getItem(key)
localStorage.getItem(key)는 key의 데이터를 조회한다.
localStorage.setItem(key,value)
localStorage.setItem(key, value)는 key에 저장되어있는 내용을 value로 설정한다.
localStorage.clear()
localStorage.clear()는 스토리지 전체를 비워줍니다.

 

 

번외) 토큰 지우는 명령어

localStrogage.cleaer()

깔끔!!