웹 스토리지(로컬, 세션) + 쿠키🍪

ChangHyeon Bae·2023년 1월 25일

로컬스토리지 세션스토리지 쿠키

JavaScript

목록 보기

8/8

🌎 웹 스토리지

웹 스토리지에는 로컬 스토리지(local Storage)와 세션 스토리지(Session Storage)가 있습니다.
위 두개의 스토리지는 HTML5에서 추가된 저장소 입니다.
간단한 키(key)와 값(value)를 저장할 수 있습니다.
window 객체의 프로퍼티로 존재 합니다.

⭐️ 어떤 장점을 가지고 있을까?

서버에 불필요하게 데이터 저장을 하지 않습니다.

넉넉한 데이터 저장 용량을 가지고 있습니다. ( 모바일 : 2.5MB, 데스크탑: 5 ~ 10MB )

문자열 외에도 자바스크립트의 모든 원시형 데이터와 객체 저장이 가능합니다.

도메인 단위로 접근이 제한되는 CORS 특성 덕분에 CSRF로부터 안전 합니다.

Cross Site Request Forgery(CSRF) , 사이트 간 요청 위조 공격입니다. 사용가 자신의 의지와는 무관하게 공격자가 의도한 행위를 특정 웹사이트에서 요청하게 하는 공격을 말합니다.

⭐️ 그러면 단점은 ?

HTML5를 지원하는 브라우저만 사용이 가능합니다.

XSS로부터 위험합니다.

Cross Site Scripting(XSS), 사이트간 스크립팅 공격입니다. 웹사이트의 관리자가 아닌 이가 웹페이지에 악성 스크립트를 삽입할 수 있는 취약점 입니다.
(local Storage에 접근하는 JS 코드로 접근이 가능합니다.)

웹스토리지는 이러한 장, 단점을 가지고 있으며 웹 스토리지에 포함되는 local Storage, session Storage에 대해서도 한번 알아 보겠습니다.

✏️ 로컬 스토리지란?

window.localStorage에 위치합니다.

key-value 저장소이기 때문에 key와 value를 순서대로 저장하면 됩니다.

값으로는 문자열, 불린, 숫자, null, undefined 등을 저장할 수 있지만 모두 문자열로 반환 됩니다.

값과 마찬가지로 키값도 문자열로 반환이 됩니다.

데이터 영구 저장이 가능합니다.

💡 로컬 스토리지 메소드 소개

localStorage.setItem('name', 'baechang');
localStorage.setItem('birth', 1993);
localStorage.getItem('name'); // baechang
localStorage.getItem('birth'); // 1993 (문자열)
localStorage.removeItem('birth');
localStorage.getItem('birth'); // null (삭제됨)
localStorage.clear(); // 전체 삭제

메소드를 간단히 설명하자면, localStorage.setItem(키, 값)으로 로컬 스토리지에 저장한 후, localStorage.getItem(키)로 조회하면 됩니다. 사용하기에는 직관적이고 간편합니다.
localStorage.removeItem(키)하면 해당 키가 지워지고, localStorage.clear()하면 스토리지 전체가 비워집니다.

✏️ 세션 스토리지란?

window.sessionStorage에 위치합니다.
clear, getItem, setItem, removeItem, key등 모든 메소드가 localStorage 와 같습니다.
브라우저 탭/윈도우가 닫히면 스토리지가 초기화 됩니다.

👀 로컬(local) 세션(session) 다른점은?

위에 앞서 로컬과 세션에 대한 설명에 근거하여,

로컬 스토리지는 데이터가 영구 저장이 가능하고, 세션 스토리지는 탭/윈도우 닫히면 스토리지가 초기화 됩니다.

로컬 스토리지는 window.localStorage, 세션 스토리지는 window.sessionStorage 객체를 각각 사용합니다.

🍪 쿠키

만료 기간이 있는 클라이언트 단에 저장하는 작은 텍스트 파일 입니다.
요청과 응답만이 존재했던 HTTP 웹 세계에서 이전에 서버와 클라이언트가 주고 받은 내역을 기억하고, 불러올 수 있는 혁신적인 역할을 수행합니다.

💡 쿠키의 종류는?

Session Cokkie: 메모리에만 저장되며, 만료시간이 있지만 브라우저 종료 시 삭제되는 쿠키

Persistent Cookie: 파일로 저장되며, Max-Age 설정을 통해 장기간 유지 가능하고, 브라우저 종료와 관계없이 사용 가능한 쿠키

Secure Cookie: HTTPS에서만 사용되는 암호화된 쿠키입니다. 비교적 안전하지만 실질적 보안이 제공되지 않기 때문에, 민감한 데이터 저장 절대 금지입니다.

Third Party Cookie: 다른 도메인에 요청이 필요할 때 생성되는 쿠키 입니다. 주로 광고 목적으로 사용되며, 유저 개인정보 악용으로 사용하는 문제가 발생합니다.

🚀 쿠키는 어떻게 동작할까?

클라이언트가 서버에 HTTP 요청을 합니다.

서버가 HTTP 응답 시, Set-Cookie를 통해 쿠키를 생성하여 전달합니다.

클라이언트는 이제부터 매 HTTP Request에서 HTTP header에 쿠키를 담아서 전송합니다.

만료 기간 전이라면, 쿠키는 브라우저에 저장되어있으며, 요청 시 항상 사용 가능 합니다.

만료 됬다면, 클라이언트가 새로 서버에 요청하여 새로운 쿠키를 받습니다.

📖 쿠키의 특징은 뭐가있을까?

⭐️ 장점

대부분의 브라우저를 지원 합니다.

데이터 유효기간을 지정 할 수 있습니다.

XSS로부터 안전 합니다. ( 쿠키 옵션인 HttpOnly 옵션 설정 시 )

⭐️ 단점

매우 작은 데이터 저장 용량을 가지고 있습니다 ( 4KB )

매번 서버에 HTTP 요청 시 같이 전달되기 때문에 서버에 부담을 줄 수 있습니다.

암호화가 안되어있기 때문에, 정보 도난의 위험성을 가지고 있습니다.

CSRF 위협을 가지고 있습니다.

스니핑 공격의 위험을 가지고 있습니다.
(스니핑이란? 해킹 기법의 하나로, 네트워크 상에서 자신이 아닌 다른 상대방들의 패킷 교환을 엿듣는 것을 의미합니다.)

공용 PC에서 쿠키값 유출 가능성이 있습니다.
( 사용자가 웹페이지에 이동하여 사용을 하게 된다면, 원치 않아도 쿠키값이 남게되는 문제가 있습니다. )

문자열만 저장이 가능합니다 ( 웹스토리지와 비슷 )

쿠키는 다양한 옵션을 제공하기 때문에 옵션 설정과 관련해서는 한번 포스팅을 하는 기회가 온다면 정리할 예정입니다.

🤓 그러면 웹 스토리지와 쿠키의 각 사용처는?

쿠키 : 일시적으로 필요한 가벼운 데이터 저장이 필요할 때
( 다시 보지 않는 팝업창, 로그인 자동 완성 )

로컬 스토리지 : 지속적으로 필요한 데이터 저장이 필요할 때
( 자동 로그인 )

세션 스토리지 : 일시적으로 필요한 데이터 저장이 필요할 때
( 일회성 로그인, 입력 폼 저장, 비로그인 장바구니(쇼핑몰) )

🤔 정리해보자

HTTP는 요청과 응답으로 이뤄지는 하나의 사이클이 끝나면, 연결이 끊어지는 무상태성을 띄어서 클라이언트의 상태를 보존하지 않습니다.
클라이언트의 상태를 서버가 아닌 클라이언트에 저장해두고 필요시마다 데이터를 꺼내서 서버에 전달하는 방식으로 HTTP의 단점을 보완하고자 쿠키와 웹스토리지를 사용하게 되었습니다.
각 웹 스토리지와 쿠키는 성격이 다르기 때문에, 상황에 맞게 적절히 사용합시다!

🔗 참고

ChangHyeon Bae

모든 결과는 내가 하기 나름이다 🔥

이전 포스트