스토리지
브라우저에서 스토리지 확인
브라우저에서 f12(개발자 도구)탭으로 들어간 다음 애플리케이션을 누르면 저장소를 확인할 수 있다.
로컬 스토리지
: 지속적으로 필요한 데이터를 저장할 때 사용
백엔드 서버와 상관 x, 브라우저를 껐다 켜도 유지된다.
window.localStorage.setItem("key01", "value01");세션 스토리지
: 일시적으로 큰 데이터를 저장할 때 사용
백엔드 서버와 상관 x, 브라우저를 껐다 켜면 초기화
window.sessionStorage.setItem("key02", "value02");쿠키
: 일시적으로 필요한 작은 데이터를 저장할 때 사용
백엔드 서버와 같이 사용
쿠키 값을 저장할 때는 JS 코드로도 가능하고 HTTP 응답 프로토콜로도 가능
document.cookie = "key03=value03";예제
<body>
<button id="localBtn">로컬 스토리지 저장</button>
<button id="sessionBtn">세션 스토리지 저장</button>
<button id="cookieBtn">쿠키에 저장</button>
<script>
//로컬
const localBtn = document.querySelector("#localBtn");
localBtn.addEventListener("click", () =>{
window.localStorage.setItem("key01", "value01");
});
//세션
const sessionBtn = document.querySelector("#sessionBtn");
sessionBtn.addEventListener("click", ()=>{
window.sessionStorage.setItem("key02", "value02");
});
//쿠키
const cookieBtn = document.querySelector("#cookieBtn");
cookieBtn.addEventListener("click", ()=>{
document.cookie = "key03=value03";
});
const getCookie=(cookieName) =>{
document.cookie.match("(^|;) ?" + name + "=([^;]*)(;|$)"); //정규 표현식
}
</script>
</body>
스토리지에 아무 것도 없을 때
로컬 스토리지에만 키와 값을 저장했을 때
세션 스토리지에 키와 값을 저장했을 때
쿠키에 키와 값을 저장했을 때
HttpOnly와 Secure Cookie
HttpOnly
HttpOnly 쿠키 속성을 사용하면 JavaScript를 통해 쿠키에 접근할 수 없게 되어, 악성 스크립트를 통해 쿠키 값에 접근하는 것을 막아준다.
HTTP Only Cookie 를 활성화 하기 위해서는 쿠키를 생성할 때, 가장 마지막에 HttpOnly 라는 접미사를 추가하면 된다.
Secure Cookie
HTTP Only Cookie를 사용하면 Client에서 Javascript를 통한 쿠키 탈취문제를 예방할 수 있다. 하지만 Javascript가 아닌 네트워크를 직접 감청하여 쿠키를 가로챌 수도 있다.
때문에 이러한 정보 유출들을 막기 위해, HTTPS 프로토콜을 사용하여 데이터를 암호화하여 서버에 넘겨주면 해커들이 쿠키를 탈취해도 암호화가 되어있어 정보를 알아낼 수 없다.
이를 위해 Secure 접미사를 사용해서 쿠키를 생성하게 되면 브라우저는 HTTPS 가 아닌 통신에서는 쿠키를 전송하지 않는다.
