위 링크에서도 아주 간단하게 웹 브라우저의 캐시를 알아봤었는데 이번엔 사용법도 같이 알아보고자 한다.
로컬스토리지
Web Storage 객체로 브라우저 내에 키:값 형태로 origin 에 종속돼 저장되는 데이터이다.
- 키:값 형태이므로 하나의 키에는 오로지 하나의 값만 저장된다.
- 추가로 넣고 싶다면 배열 형태로 넣는 수밖에 없다.
- 웹 브라우저에서 데이터를 수동으로 삭제하지 않는 한 로컬 저장소에 저장되며, 만료 날짜가 없다.
- 창이나 탭을 닫는다고 만료되는 것이 아니다.
- 최대 용량은 5MB 이다.
- 로그인을 유지하기 위한 값, 사용자의 행위를 기억할 때 사용된다.
- 예를 들면 1, 2, 3번 총 3개의 탭이 있을 때 2번 탭에서 한 행위는 기억된다.
- ex) 네이버 쇼핑에서 필터링을 걸어두는 행위 -> 새로고침해도 유지됨
- 예를 들면 1, 2, 3번 총 3개의 탭이 있을 때 2번 탭에서 한 행위는 기억된다.
- 데이터는 자동으로 서버로 전송되지 않는다.
추가로 작성할 개념인 쿠키는 자동 전송되니까 차이를 알아두자.
사용법
- 설정 :
localStorage.setItem(key, value); - key에 해당하는 value가져오기 :
localStorage.getItem(key); - 제거 :
localStorage.removeItem(key); - 전체제거 :
localStorage.clear()
개발자 도구 -> console
개발자 도구 -> application
이런 형태로 설정도 가능하고 제거도 가능하다.
로컬스토리지와 오리진
위의 개념에서 로컬스토리지는 키:값 형태로 origin 에 종속돼 저장되는 데이터라고 했는데 오리진이란?
오리진은 https://www.naver.com 을 예시를 들어 설명하면
1. https: -> protocol
2. www.naver.com -> hostname
3. 443 포트가 있지만 생략돼 있다. -> port
참고) https://www.naver.com:443 해도 똑같이 naver가 되는 것을 알 수 있다.
-> https 의 기본 포트 번호이기 때문.
위에서 말한 protocol, hostname, port 를 묶어서 오리진이라고 한다.
벨로그를 예를 들면 해당 페이지는
https://velog.io 까지가 오리진
물음표 이후의 id=983888e3-bb05-4eb6-9aab-b93f4c09a7c5 부분은 query String 이다.
그래서 같은 오리진이 같다면 로컬 스토리지에 저장되기 때문에 필터링을 걸어둔 "행위"가 기억되는 것이다.
그래서 로그인 유지할 때도 사용한다.
- 토큰 기반 방식
- 세션 기반 방식
2가지가 있는데 토큰 먼저 알아보자.
토큰 기반 방식
1. 사용자 아이디 패스워드 입력 -> 서버에 로그인 요청
2. 서버가 DB를 통해 로그인 성공 시 token (반환)
3. 이 token 은 LocalStorage에 저장된다.
4. 이 저장된 token을 보통 header-authorization 이라는 header에 담아서 보내면 로그인이 유지될 수 있는 것이다.
활용 사례 : 캐싱
로그인 유지뿐 아닌 추가로 더 알아보자.
우리가 이전에 입력했던 것들을 입력하지 않아도 자동완성으로 저장돼 있는 경우가 있다.
이것으로 다시 입력할 필요 없이 수고를 덜 수 있다. => UX가 좋아진다(개선된다)
텍스트 창을 만든 뒤에 script 에
<body>
<div>
<input type="text" id="field" />
<input type="button" class="button-62" value="검색" id="save" />
<input type="button" class="button-62" value="조회" id="read" />
<input type="button" class="button-62" value="삭제" id="clear" />
</div>
</body>
<script>
window.onload = async () => {
const field = document.getElementById("field"),
save = document.getElementById("save"),
read = document.getElementById("read"),
clear = document.getElementById("clear")
save.addEventListener("click", e => localStorage.setItem("입력값", field.value))
read.addEventListener("click", e => alert(window.localStorage["입력값"]))
clear.addEventListener("click", e => {
window.localStorage.clear()
field.value = ""
})
if (window.localStorage["입력값"]) {
field.value = window.localStorage["입력값"]
}
}
</script>이런 식으로 해서 자동완성에도 사용 가능하다.
