Cookie, localStorage와 sessionStorage

Dec 21, 2023

Contents

쿠키와 스토리지 사용을 하는 일이 생겼다.

나는 처음 초기 접근을 Localstorage로 접근했다.

이유는 사용자가 브라우저를 닫아도 유지되도록하기 위해서였다.

하지만? 쿠키를 공부하고 느꼈다. 왜? 로컬스토리지를 사용했을까?

내가 개발한 부분은 사용자가 실제 제품의 무게를 측정했을 때 그 값을 스토리지에 보관하여 해당 보관 된 데이터가 사용자가 어떤 페이지를 다녀오더라도 유지되는 것 이었다. 또한 정전 + 인터넷 연결 끊김 과정이 잠깐 발생했을 때도 유지되어야한다는 것

그래서 이 과정을 어떻게 해결할까 고민했다.

자 그럼 이제 보자. 개발엔 정답이 없다.

Cookie던 Storage이던 정당한 이유가 있으면 된다.

그럼 Cookie와 Storage를 언제 사용하는지 확인해보자

쿠키와 스토리지를 쓰는 이유

HTTP 2가지 특징인 비연결지향과 상태없음으로 인해 서버는 클라이언트의 상태를 알 수 없다.

그렇기에 클라이언트의 상태를 알아야 될 경우 (EX: 로그인 인증) 쿠키와 세션을 사용한다.

HTTP 2가지 특징

비연결지향 (Connectionless): request에 대한 response를 해주면 서버와 클라이언트가 연결이 끊어진다. 커넥션을 낭비하지 않기 때문에 리소스의 낭비를 줄일 수 있다.

상태없음 (stateless): 커넥션을 끊는 순간 상태 정보를 유지하지 않는다.

Cookie

Cookie의 특징

쿠키는 클라이언트 로컬에 저장되는 key - value 형태이다.

클라이언트 로컬에 저장되기 때문에 상대적으로 변조가 쉽다.

즉 안전에 좋지 않다 그렇기에 비밀번호, 사용자의 정보는 담지 않아야 한다.

브라우저가 종료 되어도 유지된다.

난 사실이게 없어지는 줄 알고 로컬스토리지를 사용했었다.

Cookie의 종류

세션 쿠키 (Session Cookie): 웹 브라우저가 종료될 때 제거되는 쿠키

지속 쿠키 (Persistent Cookie): 유효시간을 정하지 않은 경우 브라우저가 종료되어도 남아 있는 쿠키이다.

Cookie 저장 한계

클라이언트에 최대 300개 까지 쿠키를 저장 가능

서버 도메인 하나당 최대 20개의 쿠키를 저장 가능

하나의 쿠기 값은 최대 4KB까지 저장 가능

Vue3에서 js-cookie를 사용하는 방법

npm: js-cookie

A simple, lightweight JavaScript API for handling cookies. Latest version: 3.0.5, last published: 8 months ago. Start using js-cookie in your project by running `npm i js-cookie`. There are 7682 other projects in the npm registry using js-cookie.

https://www.npmjs.com/package/js-cookie


// 쿠키 생성
Cookies.set('name', 'value')
// 쿠키 읽기
Cookies.get('name') // => 'value'
// 쿠키 전체 읽기
Cookies.get()
// 쿠키 삭제
Cookies.remove('name')

프로젝트에 앞서 js-cookie를 사용하기로 생각하고 진행했다. 기본적인 사용법은 위와 같다.

아래는 내가 이번 프로젝트에서 사용한 방법이다.

vue3를 이용하여 진행했다.


// 일단 js-cookie를 npm으로 설치 후에 import를 진행한다.
import Cookies from 'js-cookie';

// 쿠키를 저장하는 함수를 만든다.
const setLOTActualWeightCookie = () => {
    // 만료일은 일주일로 해봄
		// 쿠키 이름, 값, 유효 기간
    Cookies.set('productionLOTWeight', lotActualWeight.value, { expires: expirationDate });
};

localStorage와 sessionStorage

웹 스토리지 객체인 localStorage와 sessionStorage는 브라우저 내에 키-값을 저장할 수 있게 해줍니다.

이 둘을 사용하면 페이지를 새로고침하고(sessionStorage의 경우) 심지어 브라우저를 다시 실행해도 (localStorage의 경우) 데이터가 사라지지 않고 남아있습니다.

중요한건 “쿠키를 사용하면 똑같이 쓸 수 있는데? 굳이 ?” 왜 또 다른 객체를 사용해 데이터를 저장하는 걸까?

쿠키와 다르게 웹 스토리지 객체는 네트워크 요청 시 서버로 전송되지 않는다.

이런 특징으로 쿠키보다 더 많은 자료를 보관할 수 있다.

쿠키와 다르게 HTTP헤더를 통해 스토리지 객체를 조작할 수 없다.

웹 스토리지 객체는 도메인, 프로토콜, 포트로 정의되는 오리진에 묶여있습니다.


setItem(key, value) – 키-값 쌍을 보관합니다.
getItem(key) – 키에 해당하는 값을 받아옵니다.
removeItem(key) – 키와 해당 값을 삭제합니다.
clear() – 모든 것을 삭제합니다.
key(index) – 인덱스(index)에 해당하는 키를 받아옵니다.
length – 저장된 항목의 개수를 얻습니다.