1. 개발자 도구란?
말 그대로 개발자들이 쓰는 도구를 뜻한다.
프론트엔드 개발하는데 도움이 될만한 여러가지 기능을 제공한다.
개발자 도구는 각각의 브라우저가 기본적으로 제공하며 별도의 설치가 필요없다.
프론트엔드 개발자의 경우 업무를 보는 하루 종일 웹페이지 한쪽에 개발자 도구를 띄워놓고
개발을 할 만큼 굉장히 필수적이고, 백엔드 개발자의 경우 데이터를 크롤링 할 때 태그를
분석해야하므로 사용할 줄 알아야한다.
2. Application 패널의 기능은?
브라우저 저장소의 기능을 담당한다. 현재 로딩된 웹 페이지에서 사용된 리소스(이미지,스크립트,데이터)를 열람할 수 있는 패널이다. 웹 SQL 데이터베이스, 로컬 및 세션 스토리지, 쿠키,
어플리케이션 캐시, 폰트, 스타일시트를 포함한 로딩된 모든 리소스를 검사한다.
3. Local Storage, Session Storage, Cookie 차이점은?
Local Storage Session Storage
Local Storage와 Session Storage는 Web Storage로 지속성에 관련해서 두가지로
나눈것이다.
Local Storage
한번 저장하면 명시적으로 지우지 않는 이상 영구적으로 보관되면서
도메인마다 별도로 Local Storage가 생성된다.
Session Storage
반대로 지속적으로 보관되지않고, 현재 페이지가 브라우징되고 있는
내에서만 데이터가 유지된다.
즉, 브라우저가 종료되면 Session Storage도 삭제된다.
Cookie
cookie는 서버와 연동되어 만료 기한이 있는 key-value 저장소이다. cookie는 4kb로 용량이 제한되어 있다.
4. Local Storage, Session Storage, Cookie 사용 예시
데이터를 어디에 저장하면 좋을까?
Local Storage
로그인 ID, PASSWORD 자동저장
인터넷이 연결되어 있지 않아도 데이터를 저장 가능
Session Storage
비로그인 장바구니 기능, 사용자가 '입력폼'을 입력하다가 페이지에서 벗어난 경우 백업/복구
Cookie
Cookie는 사이트에서 로그인 상태를 유지하고 사이트 환경설정을 기억하는 용도로 사용.
팝업창에서 "오늘 하루 동안 보지 않기", "일주일 동안 보지 않기"같은 기능에 필요.
5. 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()는 스토리지 전체를 비워줍니다.
