[개발자도구] Application 패널

Application 브라우저의 저장소

▶️ 각 기능별로 팀을 나누어 조사하고 멘토님께 설명을 듣는 시간을 가졌다. 그냥 아무것도 모르는 상태에서 듣는 것 보다 직접 찾아보고 이해해보고 설명을 들으니 더 머리에 잘 들어온듯.

Application패널을 조사하는 팀이었는데, 꽤 흥미로웠다. 바닐라 JS강의를 들을때 잠깐 맛보기로 local storage를 접한 적이 있는데, 이번에 더욱 자세하게 알게 되었다.
또, 발표를 해야한다는 압박감 덕분에(?) 정말 정확히 알아야 한다는 생각이 컸어서 여기저기 물어보고 다녔는데, 너무 감사하게도 다들 최대한 잘 알려주셨다.

제일 헷갈렸던 부분이 쿠키와 local storage 의 차이점..
둘다 로그인하거나 사용자가 브라우저를 이용할때, 정보가 컴퓨터에 저장이 되는 것인데, 쿠키는 만료세션을 정할 수 있다고 한다. 그치만 만료 세션을 정하지 않을 수 도 있다고 한다... 그럼 local storage랑 다른점이 뭐지 ..같은거아닌가 ㅠ

이해한 것 정리

Local storage

특징

1. 저장용량이 크다
2. 만료기간이 따로 없기 때문에, 한번 저장해두면 삭제하지 않는 이상 영원히 저장됨
3. Key: value형태의 객체로 저장됨
4. 저장된 정보가 서버로 전송되지 않음.

사용예시

1. 브라우저에 로그인 정보를 저장하면 껐다 켜도 자동으로 로그인이 된다.
2. 유튜브에서 자막 끄기 /자동재생등, 기능을 설정해두면 껐다 켜도 설정해둔 기능이 유지 된다.

---

Session storage

특징

1. 창을 끄는 순간 저장된 정보들이 사라진다.
2. Key: value형태의 객체로 저장되며 저장용량이 크다.

사용예시

1. 은행과 같이 사용자정보의 보안이 필요할때.
2. 비회원 쇼핑 장바구니
3. 웹사이트의 언어 설정 등

---

Cookie

쿠키에 대해 알아보는것이 재미있었다 ㅋㅋ 항상 쿠키허용 하시겠습니까 팝업이 뜰때 마다 쿠키가 뭐지 이러고 허용했었는데 .. 내가 검색한것 관련된 광고가 뜨는 것이 쿠키때문이었다니 ㅋㅋ 신기

특징

1. 만료기간을 설정 할 수 있다.
2. 서버-클라이언트간의 지속적인 데이터 교환을 위해 만들어졌기 때문에 검색정보 들이 서버로 전송된다.
3. 하나의 쿠키는 4KB까지 저장 가능

사용예시

1. 쿠키를 허용하면 서버로 검색정보가 전송되어 관련된 광고들이 뜨거나 관련된 제품들을 추천해준다.
2. '오늘하루 보이지 않기'팝업창에 체크를 하면 정해둔 만료기간인 24시간 동안 해당 팝업창이 뜨지 않는다

---

Cookie 와 Storage 의 차이점

Cookie는 정보가 서버로 전송됨
Storage는 정보가 브라우저에만 저장되며 쿠키보다 저장할 수 있는 데이터의 양이 큼.