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

1. 개념

  • 브라우저마다 저장되는 데이터

  • 웹 스토리지 객체로 브라우저 내에 {key:value} 형태로 오리진에 종속되어 저장되는 데이터를 말한다.

  • 오리진이 같은 브라우저 내에서 공유된다.

  • 하나의 키에는 오직 하나의 값만 저장

  • 데이터는 사용자가 브라우저에서 수동으로 삭제하지 않는 이상 평생동안 저장되며, 만료날짜가 없다.

  • 사용자가 창이나 탭을 닫아도 유지되며, 컴퓨터를 종료해도 만료되지 않는다.

  • 최대 저장 용량은 5MB 이다.

  • 보통은 로그인을 유지하기 위한 값으로 사용되며 로컬 스토리지 데이터는 자동으로 서버로 전송되지 않는다.

    • 참고로 쿠키는 자동 전송된다.

2. 사용법

  • 설정

    • localStorage.setItem(key, value);

  • key 에 해당하는 value 가져오는 법

    • localStorage.getItem(key);

  • 제거

    • localStorage.removeItem(key);

  • 전체 제거

    • localStorage.clear();

3. 오리진

  • https://site.com:8080/path/page?k1=v1&k2=v2

    • protocol : https

    • host : site.com

    • port : 8080

    • origin = protocol + host + port -> https://site.com

    • pathname : path/page

    • search

    • k1=v1&k2=v2

  • 기본포트번호는 생략가능하다.

    • http(80), https(443)

  • 로컬 스토리지는 웹 스토리지 객체로 브라우저 내에서 key:value 형태로 저장된다.

  • 같은 오리진을 가진 브라우저 내에서는 공유되며 오리진에 종속적이다.

    • search.shopping.naver.com 내에서는 path 가 달라도 로컬스토리지가 공유된다.

    • 하지만 naver.com 은 오리진이 다르기 때문에 로컬 스토리지가 공유되지 않는다.

  • 보통 query string 이라고한다.

4. UX 개선

로컬스토리지를 이용하여 사용자의 경험을 향상시킬 수 있다.

  1. 로그인 유지

    1. 최초로 로그인을 한 뒤, 자동로그인 기능을 활성화 시킨다면, 로그인시 발급받은 토큰값을 이용해서 계속 재로그인 없이 서버와 통신할 수 있다.

  2. 캐싱 - 자동완성

    1. 로컬스토리지에 사용자 이전 입력값을 저장해두고 새로고침을 해도 사라지지 않도록 할 수 있다.

Previous웹 브라우저의 캐시 - 세션 스토리지Nextbrowser rendering

Last updated