웹브라우저의 캐시 #1. 로컬 스토리지

웹브라우저의 캐시 - 로컬스토리지

1. 로컬스토리지

브라우저마다 저장되는 데이터. 같은 오리진끼리 로컬스토리지를 공유함(오리진에 종속됨)
크롬 브라우저 로컬스토리지에다가 큰돌 천재라고 저장 했다 -> 익스플로러에서 못봄
로컬스토리지는 key, value 형태

특징

• 하나의 키에 오로지 하나의 값만 저장됨
• 데이터는 사용자가 브라우저에서 수동으로 삭제하지 않는 한 평생 동안 로컬 저장소에 저장되어 만료 날짜가 없다.
  컴퓨터 종료해도 사라지지 않음
• 최대 저장 용량 5MB
• 사용자의 행위를 기억할 때 로그인을 유지하기 위한 값 등으로 사용되며 로컬 스토리지 데이터는 자동으로 서버로
  전송되지 않는다. (쿠키는 자동 전송)

내가 필터링 조건 같은걸 걸어두고 새로고침을 했을 경우 조건이 그대로 유지되었으면 좋겠다
-> 로컬스토리지에 저장

---

웹브라우저의 캐시 - 로컬스토리지와 오리진(origin)

2. 로컬스토리지와 오리진

오리진? 주소창에 url 치고 주소 들어갈때 프로토콜://호스트네임:포트번호/패스/?쿼리스트링/#해시
프로토콜, 호스트네임, 포트가 오리진임(포트번호는 생략되어있음)

https의 기본 포트번호는 443 / http의 기본 포트번호는 80

---

웹브라우저의 캐시 - 로컬스토리지의 활용사례:캐싱

1. 로그인 유지

• 로그인 방식은 세션/토큰이 있음
  토큰기반일 때 어떤 서버에 아이디/패스워드 입력
  토큰을 받음
  이 토큰을 로컬스토리지에 저장
  다시 요청할때 다시 로그인하지 않고 로컬스토리지에 저장된 토큰을 서버에 줌 (header-authorization) -> 로그인 유지

2. 캐싱
   사용자는 브라우저에 입력을 하고 설정을 함
   이런 값들을 캐싱. 담아둔다
   자동완성을 생각해보자. 이전에 입력한 값들이 다시 입력할 가능성이 높다
   사용자가 다시 입력하는 수고를 덜 수 있음 -> UX 증가. 이러한 것에 캐싱이 사용됨