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

carlkim·2023년 11월 6일
0

CS학습 - 네트워크

목록 보기
29/48

---- 캐싱 ----------

로컬 스토리지 어디다 쓰냐?

  1. 로그인 유지에 사용된다.
    1) 세션

    2) 토큰
    1-1 유저가 아이디와 패스워드를 서버에 주면
    1-2 서버가 토큰을 발급한다(인증완료시)
    1-3 localstorage에서 서버가 준 토큰을 저장한다.
    1-4 사용자는 로그인을 또 하는게 아니라 로컬 스토리지에 저장된 토큰을 서버에 준다.
    1-5 header_authurization에 토큰값을 전달해서 로그인을 유지시킨다.

  1. 캐싱
    사용자는 브라우저에 입력을 하고 설정을 한다.(캐싱[담아두기])

이를테면 자동완성 -- 이전에 입력한 값들을 다시 입력할 수고를 줄여준다.
UX편의성을 증대시켜준다.

---- 세션 스토리지 ---------

세션 스토리지(session Storage)는 로컬 스토리지와 매우 유사
세션 스토리지는 웹 스토리지 객체로 브라우저 내에 { key : value } 형태로 오리진에 종속되어 저장되는 데이터를 말합니다.
-- 하나의 키에 오로지 하나의 값만 저장된다
-- 최대 저장용량은 5MB이다.
-- 사용자가 브라우저에서 탭을 닫으면 데이터는 만료된다.

세션 스토리지 사용법

-- 설정 : sessionStorage.setItem(key, value)
-- 탐색 : sessionStorage.getItem(key, value)
-- 제거 : sessionStorage.removeItem(key);
-- 전체제거 : sessionStorage.clear()

보통은 세션 스토리지보다는 로컬 스토리지가 많이 쓰인다.

---- 쿠키 ---------

브라우저의 작은 데이터 조각 : 쿠키

  1. 사용자가 서버에 무언가 요청을 한다.
  2. 서버에서 응답헤더로 Set-Cookie = ?, ?값을 쿠키로 준다.
  3. 이제 그 사용자는 헤더에 쿠키값을 요청 헤더에 넣어서 자동으로
    서버에서 전송하며 요청을 한다.(브라우저에도 저장된다)

HTTP 헤더를 통해 클라이언트 또는 서버가 HTTP 요청 또는 응답 할 때 추가 정보를 전달 할 수 있다.

쿠키는 클라이언트와 서버 둘 다 조작이 가능하지만 보통 서버에서 만료기한 등을 설정 및
컨트롤을 한다, 저장용량은 최대 4KB까지 가능하다.

클라이언트에서도 조작할 수 있지만 권장되지 않는 행동이다.
이렇게 되면 쿠키에 대한 제어권을 클라이언트에게 두게 되는데
쿠키에는 보통 민감한 정보들이 담길 수 있기 때문에 클라이언트가 아닌 서버가 제어권을 가져야한다.

세션 쿠키

세션 쿠키는 Expires 또는 Max-Age 속성을 지정하지 않는 것을 말한다.
브라우저가 종료되면 쿠키도 사라진다.

영구 쿠키

영구 쿠키는 Expires 또는 Max-Age 속성을 지정해서 특정날짜 또는 일정기간이 지나면
삭제되게 만든 쿠키, 브라우저를 닫을 때 만료되지 않습니다

쿠키허용 알림장 써야한다

profile
가장 나답게 문제해결.

0개의 댓글