hmk run dev

1 쿠키 저장 삭제 본문

React

1 쿠키 저장 삭제

hmk run dev 2021. 4. 1. 15:32

 

개발자 도구를 켜서 콘솔창에 입력을 한다

 

document.cookie = "MY_COOKIE = here ;" ;

 

이렇게 입력하면 여기서 MY_COOKIE는 키값(name)이 되고 

 

here은 value값이 된다

여기서 expires 라는 만료일이라는 옵션을 더해줄 수 있는데 이때 자바스크립트의 문법을 사용한다

 

let date = new Date('2022-10-05') >> 이렇게 date라는 변수에 자바스크립트 Date함수를 사용해 변수로 지정해주고

 

date를 출력해주면

 

Wed Oct 05 2022 09:00:00 GMT+0900 (대한민국 표준시) {}가 출력된다

 

그렇다면 아까 했던

 

document.cookie = "MY_COOKIE = here ;" ; 쿠키설정에 만료일도 넣어주면된다

 

넣어주기전에 스트링 값으로 변환해줘야한다

 

let date_str = date.toUTCString // 데이트값을 스트링으로 변환해준다

 

document.cookie = "MY_COOKIE = here ; expires="+date_str ; 

 


document.cookie = "MYMY = hi ; expires="+date_str 이렇게 쿠기의 키와 밸류 그리고 만료일까지 임의로 설정해서 저장시도 !

저장완료!

 

 

웹상의 모든 쿠키 가져오기 >> document.cookie 

 

그렇다면 쿠키를 지우는 방법은??

방법은 많지만 보통 만료일을 지금 날짜보다 전으로 당기는 방법이있습니다!

 

일단 만료일 변수지정

let exp = new Date('2001-01-01').toUTCString 날짜를 2001 훨씬 예전으로 셋팅 이번엔 스트링처리도 한꺼번에

 

그리고 쿠키 만들때 썻던 그대로에 마지막 만료일만 바꿔준다

 

사라졌다 생성하는 것과 셋팅하는 것의 호출 방법이 같으며 만료일 조정으로 삭제가 가능하다

 


그리고 세션스토리지라는 방식이 있다 이 친구는 웹을 닫으면 사라진다...

그리고 만들고 삭제하고 관리하는 방법이 쿠키에 비해 간결하다 

 

sessionStorage.setItem("MY_SESSION", "here") 이렇게 콘솔창에서 세션스토리지 셋아이템으로

키값과 밸류값을 설정해주고 엔터 눌러주면 세션스토리지에 저장된다

 

그리고 호출할땐 sessionStorage.getItem("MY_SESSION") >> 입력하면 마이세션의 밸류 값인

"here"가 출력된다

 

삭제는 이렇게~ sessionStorage.remove("MY_SESSION")

 

sessionStorage.clear()는 모든 세션을 삭제해준다

 


세션 스토리지는 브라우저를 닫으면 다 없어진다

그렇다면 안없애고 유지하는 방법은??? >> 로컬스토리지!

 

그렇다고 중요한 정보를 넣어두면 매우 위험!!...

 

사용법은 세션 스토리지랑 방법이 거의 똑같다

 

sessionStorage 대신 localStorage 이런식으로 세션을 로컬로 바꾸면된다

 

 

쿠키 저장 셋팅 삭제하는 코드 

Cookie.js에 입력해두고 export , import 이용해서 사용하자

 

// 키값 기준으로 쿠키에 저장된 값을 가져오는 함수
const getCookie = (name) => {
  // 쿠키 값을 가져옵니다.
  let value = "; " + document.cookie;
  // 키 값을 기준으로 파싱합니다.
  let parts = value.split("; " + name + "=");
  // value를 return!
  if (parts.length === 2) {
    return parts.pop().split(";").shift();
  }
};

// 쿠키에 저장하는 함수
const setCookie = (name, value, exp = 5) => {
  let date = new Date();
  // 날짜를 만들어줍니다.
  date.setTime(date.getTime() + exp * 24 * 60 * 60 * 1000);
  // 저장!
  document.cookie = `${name}=${value};expires=${date.toUTCString()};path=/`;
};

// 만료일을 예전으로 설정해 쿠키를 지웁니다.
const deleteCookie = (name) => {
  document.cookie = name + "=; expires=Thu, 01 Jan 1999 00:00:10 GMT;";
};

export { getCookie, setCookie, deleteCookie };

// const getCookie = (name) => {
//   //네임으로 벨류값을 받아온다!

//   //쿠키값  모두 출력!
//   let value = ";" + document.cookie;

//   //세미 콜론말고 아래처럼 나눠주면??
//   // 쿠키정보형식은 aa=xx; 여기서  aa=가 ${name}=
//   // ;user_id= >> 이걸로 문쟈열을 나눠준다
//   //쿠키의 value값만 나오겠죠??
//   let parts = value.split("; " + name + "=");

//   //우리가 찾는 쿠키가 없을 수도 있을 수도 있다 그렇다면 아무것도 쪼개지지 않겠죠?
//   // 음... 근데 위처럼 ;${name}=으로 스플릿 해주면 맨앞에 갚은 어떻게 가져오죠??
//   //아래 조건문으로 가져올 수 있습니다!
//   if (parts.length === 2) {
//     // pop은 정렬의 맨뒷값을 가지게해줌
//     return parts.pop().split(";").shift(); //shift는 pop과 반대로 동작하ㅕ
//     //
//   }
// };

// const setCookie = (name, value, exp = 5) => {
//   //이름과 밸류 만료일
//   //백틱을 써서 간결하게 표현해보자
//   let date = new Date();
//   // 일시설정
//   date.setTime(date.getTime() + exp * 24 * 60 * 60 * 1000);

//   document.cookie = `${name}=${value}; expires = ${date.toUTCString}`;
// };

// const deleteCookie = (name) => {
//   // 이름만 받아오면 된다 만료일이야 굳이 한참전으로 설정해놓으면 된다
//   let date = new Date("2020-01-01").toUTCString; // 예전날짜

//   document.cookie = name + "=; expires=" + date;
// };

// export { getCookie, setCookie, deleteCookie };

 

 

const getCookie = (name) => {
  //네임으로 벨류값을 받아온다!

  //쿠키값  모두 출력!
  let value = ";" + document.cookie;

  //세미 콜론말고 아래처럼 나눠주면??
  // 쿠키정보형식은 aa=xx; 여기서  aa=가 ${name}=
  // ;user_id= >> 이걸로 문쟈열을 나눠준다
  //쿠키의 value값만 나오겠죠??
  let parts = value.split(`; ${name}=`);

  //우리가 찾는 쿠키가 없을 수도 있을 수도 있다 그렇다면 아무것도 쪼개지지 않겠죠?
  // 음... 근데 위처럼 ;${name}=으로 스플릿 해주면 맨앞에 갚은 어떻게 가져오죠??
  //아래 조건문으로 가져올 수 있습니다!
  if (parts.length === 2) {
    // pop은 정렬의 맨뒷값을 가지게해줌
    return parts.pop().split(";").shift(); //shift는 pop과 반대로 동작하ㅕ
    //
  }
};

const setCookie = (name, value, exp = 5) => {
  //이름과 밸류 만료일
  //백틱을 써서 간결하게 표현해보자
  let date = new Date();
  // 일시설정
  date.setTime(date.getTime() + exp * 24 * 60 * 60 * 1000);

  document.cookie = `${name}=${value}; expires = ${date.toUTCString}`;
};

const deleteCookie = (name) => {
  // 이름만 받아오면 된다 만료일이야 굳이 한참전으로 설정해놓으면 된다
   let date = new Date("2020-01-01").toUTCString; // 예전날짜

  document.cookie = name + "=; expires=" + date;
};

export { getCookie, setCookie, deleteCookie };

 

 

Comments