👉 Application 패널의 기능은?
브라우저 저장소의 기능을 담당하며 현재 로딩된 웹 페이지에서 사용된 리소스(이미지, 스크립트, 데이터 등)를 열람할 수 있는 패널이다. 웹 SQL 데이터베이스, 로컬 및 세션 스토리지, 쿠키, 어플리케이션 캐시, 이미지, 폰트, 스타일시트를 포함한 로딩된 모든 리소스를 검사한다.
👉 Local Storage, Session Stroage, Cookies의 차이점은?
1. 쿠키는 만료 기한이 있는 Key, Value 형태의 저장소
쿠키 장점 : 대부분의 브라우저가 지원한다는 장점이 있습니다.
쿠키 단점 : 쿠키는 처음부터 서버와 클라이언트 간의 지속적인 데이터 교환을 위해 만들어졌기 때문에 서버로 계속 전송이 되어 불필요한 데이터 낭비가 발생할 수 있습니다.
불필요한 데이터 낭비가 있는 쿠키의 단점을 보완하기 위해 HTML5에서 만든 기술이 웹스토리지이며 웹스토리지는 로컬 스토리지와 세션 스토리지로 나누어 집니다.
2. 로컬 스토리지 (Local Storage)
로컬 스토리지는 브라우저에 반영구적으로 데이터를 저장하며, 브라우저를 종료해도 데이터가 유지된다.
3. 세션 스토리지(Session Storage
세션 스토리지는 각 세션마다 데이터가 개별적으로 저장된다.
세션 스토리지는 로컬 스토리지와 다르게 세션을 종료하면 데이터가 자동으로 제거되며, 같은 도메인이라도 세션이 다르면 데이터에 접근할 수 없다.
👉 Local Storage, Session Stroage, Cookies 사용 예시 - 어떤 데이터를 어디에 저장하면 좋을까?
1. 쿠키 - 서비스가 직접적이지 않은 데이터, 빠른 처리가 필요한 임시데이터
( ex.광고 팝업 )
2. 로컬스토리지 - 클라이언트에 대한 정보를 영구적으로 저장하는 특징이 있어 지속적으로 필요한 데이터(data persistant) (ex. 자동 로그인 여부)
3. 세션스토리지 - 세션 종료 시(브라우저 닫을 경우) 클라이언트에 대한 정보 삭제하는 특징 ex) 저장 보안이 중요한 임시데이터 ( 은행 로그인 ) , 특정한 유저 정보)
👉 Local Storage에 특정 데이터를 저장하고 가져오는 방법
로컬 스토리지의 저장은 키와 값의 형태로 이루어진다. 키는 저장된 값을 식별하고 가져오는 데 사용되고 원하는 만큼 로컬 스토리지에 키를 저장할 수 있다. 반대로 키를 가져올 때는 조회하려는 키 값으로 요청한다. 할당된 키에 저장되는 값은 숫자, 문자열 또는 객체나 배열 같은 형태로 저장할 수 있다.
setItem(key,value); // 저장
getItem(key); // 호출
🤓 실제 개발자도구 페이지
🙀 로그인 첫 화면 아직 저장 된 데이터가 없어 localStorage가 비어있다.
🥴 input박스에 이름을 넣은 후, 로그인 버튼을 누르면 input의 value값이 getItem을 통해 호출되어 밑에 뜨게 된다.
🙆♀️ localStorge를 확인하면 key(username)과 value(호정)이 저장되어있다. setItem을 통해 localStorge에 저장되어 있기때문에 새로고침을 해도 'Hello 호정'이라는 문구는 계속 유지된다.
