[JS] 쿠키 세션 로컬스토리지

목차

1. 쿠키

2. 세션 스토리지

3. 로컬 스토리지

 

1. 쿠키 (Cookie)

- 브라우저가 서버와 통신할 떄 함께 전송되는 작은 데이터 조각

(쿠키는 유효기간이 있으며 서버로 전송되는 작은 텍스트 파일 / 유효기간이 지나면 삭제됨)

- key=value 형태로 저장되며, 클라이언트에서 생성되거나 서버에서 Set-Cookie 응답 헤더로 설정할 수 있음

- 서버로부터 전송된 쿠키는 웹 브라우저에 저장되며, 이후 해당 웹 사이트를 방문할 때마다 해당 쿠키는 서버로 전송됩니다.

 

쿠키 사용 예시

- 로그인 상태 유지 (세션 or 토큰 저장)

- 사용자 선호 설정 저장 (다크모드, 언어 등)

- 쇼핑몰 장바구니 등 임시 상태 저장

 

(* 핵심은 '사용자를 식별'할 수 있는 정보를 저장한다는 것)

 

주요 쿠키 속성

속성	설명
HttpOnly	JS에서 접근 불가 (보안, XSS 방어)
Secure	HTTPS일 때만 전송됨
SameSite	CSRF 방지용 / Strict, Lax, None 중 선택
Path	어떤 경로에서 쿠키가 유효한지
Expires or Max-Age	쿠키 만료 시점 설정

 

function createCookie(name, value, time){
  // 썩은 쿠키는 유효하지 않는다.
  // 시간을 넣지 않고 쿠키를 생성하면 세션 쿠키 지속 계속 되는 쿠키
  let date = new Date();
  // ms로 시간을 증가된 값을 만들어서 
  // 1000 = 1초

  // 1일 이후의 시간을 만들면
  // time === 일 단위
  // time === 2면 2임
  date.setTime(date.getTime() + time * 24 * 60 * 60 * 1000); // ms setTime : 수정하겠다.
  document.cookie = name + "=" + value + ";" + "expires=" + date.toUTCString() + ";" + "path=/" 
  //page=/ domain까지 로그인했을
}

console.log(new Date().getTime());

createCookie("devOps2", 86858585, 1);
createCookie("devOps3", 1242143, 1);
console.log(document.cookie);
// [[devOps2,123], [devOps3, 1242143]]

// 문자열을 잘라서 가져오는 함수를 만들자
function getCookie(name){
  let arr = document.cookie.trim().split(";");
  let result = undefined;
  for (let i = 0; i < arr.length; i++){
    arr[i] = arr[i].trim().split("=");
    console.log(arr[i][0]);
    if (arr[i][0].trim() === name){
      result = arr[i][1];
    }
  }
  console.log(arr);
  console.log(result)
  return result;
}
getCookie("devOps3")

 

2. 세션 스토리지 (Session Storage)

- 서버에 불필요한 데이터를 저장하지 않습니다.

- 브라우저를 종료할 때까지 인증상태를 유지(탭/윈도우가 닫히면 세션 스토리지는 초기화)

- 쿠키보다 보안이 뛰어납니다.

// 세션에 값을 저장
// setTime
sessionStorage.setItem("토큰", "데이터의 내용");

// 세션의 값을 호출
// 토큰의 키가 있으면 데이터를 호출
sessionStorage.getItem("토큰");

// 모든 세션을 전체 삭제
sessionStorage.clear();

// 세션 하나 제거
sessionStorage.removeItem("토큰");

 

3. 로컬 스토리지 (Local Storage)

- 브라우저 창을 닫더라도 데이터가 유지됩니다.

- 서버에 불필요한 데이터를 저장하지 않습니다.

- 자동로그인에 사용됩니다.

// 로컬 스토리지는 큰 데이터를 저장할 때 사용한다.
localStorage.setItem("토큰", "데이터의 내용");

localStorage.getItem("토큰");

localStorage.clear();

localStorage.key(0);

// 객체를 문자열로 변환하면 obeject
// JSON 문자열로 변경

let obj = { name : "자카" };
console.log(String(obj)); // Object Object 출력
// String 생성자 : 전달받은 인자를 문자열로 변환

// 컴퓨터와 컴퓨터는 데이터를 주고받을 때 문자열로 주고 받는다
console.log(JSON.stringify(obj)); // 문자열로 변환
// 데이터를 보낼 준비
obj = JSON.stringify(obj); // 다시 배열로 변환
// 데이터를 전달받은 서버

let arr = [{name : "자카"}, {name : "자카박"}];
localStorage.setItem("todo",JSON.stringify(arr));

let obj2 = localStorage.getItem("todo");
console.log(obj2);
obj2 = JSON.parse(obj2);
console.log(obj2);

 

 

쿠키 본문 수정 (25.04.30)