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.
로그인 유지
a.
최초로 로그인을 한 뒤, 자동로그인 기능을 활성화 시킨다면, 로그인시 발급받은 토큰값을 이용해서 계속 재로그인 없이 서버와 통신할 수 있다.
2.
캐싱 - 자동완성
a.
로컬스토리지에 사용자 이전 입력값을 저장해두고 새로고침을 해도 사라지지 않도록 할 수 있다.