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

목차

1. 쿠키

2. 세션 스토리지

3. 로컬 스토리지

 

1. 쿠키

- 쿠키는 유효기간이 있으며 서버로 전송되는 작은 텍스트 파일

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

  해당 쿠키는 서버로 전송됩니다.

-  쿠키는 일반적으로 사용자 식별, 장바구니, 선호설정, 장바구니 등의 정보를 저장하는데 사용됩니다.

유효기간이 지나면 삭제됩니다.

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. 세션 스토리지

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

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

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

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

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

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

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

 

3. 로컬 스토리지

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

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

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

// 로컬 스토리지는 큰 데이터를 저장할 때 사용한다.
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);