[Web] 웹 스토리지 / 쿠키

웹에서의 데이터 저장

데이터를 서버가 아닌 클라이언트에 저장할 수 있다.

 

보통 로컬 스토리지, 세션 스토리지, 쿠키를 사용하고 가끔 Service workers를 사용한다.

로컬 스토리지와 세션 스토리지의 차이는 서비스의 데이터 크기 차이고,

쿠키는 보안 설정 같은 것을 할 수 있다.

 

개발자 도구 -> 애플리케이션 에서 확인할 수 있다.

개발자도구 -> 애플리케이션

 

---

로컬 스토리지

지속적으로 필요한 데이터를 저장할 때 사용한다.

백엔드 서버와 상관 없고, 브라우저를 껐다 켜도 유지된다.

 

키와 값으로 저장한다.

window.localStorage.key01 = "value01";

로컬 스토리지 키 & 값 저장

---

버튼 눌러서 저장되게 하기

<button id="localBtn">로컬 스토리지 저장</button>

<script>
	// 버튼 클릭 시 저장되게
    const localBtn = document.querySelector('#localBtn');
    localBtn.addEventListener('click', () => {
      window.localStorage.key01 = 'value01';
      window.localStorage.setItem('key02', 'value02');
    })

	// 값 가져오기
    console.log(window.localStorage.key01);
    console.log(window.localStorage.getItem('key02'));
</script>

 

---

세션 스토리지

일시적으로 큰 데이터를 저장할 때 사용한다.

백엔드 서버와 상관 없고, 브라우저 껐다 키면 초기화된다.

<button id='sessionBtn'>세션 스토리지 저장</button>
<script>
    const sessionBtn = document.querySelector('#sessionBtn');
    sessionBtn.addEventListener('click', () => {
      window.sessionStorage.setItem('key03', 'value03')
    })
</script>

 

---

쿠키

일시적으로 필요한 작은 데이터를 저장할 때 사용한다.

백엔드 서버와 같이 사용한다.

 

쿠키에 값을 저장할 때는 JS 코드로도 가능하고, HTTP 응답 프로토콜로도 사용 가능한데,

HTTP 응답 프로토콜로 저장하는 것이 좋다.

 

JS로 쿠키에 값을 저장하면 JS를 코드로 쓸 수 있는 누구나 사이트에 접속해서

개발자 도구 콘솔로 쿠키와 관련된 JS 코드를 짜면 쿠키를 건드릴 수 있따.

 

 

HttpOnly -> http로만 사용 가능하게 하겠다.

HttpOnly가 설정이 되어 있으면 JS 코드로 쿠키 값을 가져올 수 없다.

 

// 쿠키 가져오는 코드
const getCookie = (cookieName) => {
  document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)'); // 정규표현식
}
console.log(getCookie('key04'));