TIL Cookie 사용해보기

1. 쿠키 다시 살펴보기

2. 쿠키 만들기

3. 쿠키 찾아오기

4. 쿠키 삭제하기

 

웹저장소에 관한 글

https://jaeilit.tistory.com/25

---

쿠키 다시 살펴보기

1. 간단한 특징

쿠키는 사용자가 유효기간을 정할 수 있다. (브라우저가 종료되도 인증은 유지됨)
도메인 하나당 20개의 값 그리고 하나당 4kb까지 저장 가능
암호화가 존재하지 않아서 보안상 위험할 가능성

2. 동작 설명

클라이언트가 페이지 요청
서버에서 쿠키를 생성
HTTP 헤더에 쿠키를 포함시켜서 응답한다.

3. 사용의 예

로그인시 아이디 비밀번호 저장하시겠습니까?
쇼핑몰의 장바구니 등
팝업종료시 더이상 보지않음

1. 쿠키 만들기(setCookie())

인자로 받을 값

인수로 넘길 값

• key값이 되는 user_id name과 value 값의 value, 만료일 exp를 인자로 받는다.
• 만료일(expires)을 정하기 위해서 날짜를 만들어주는데, 만료일을 3일로 정함
• 3번째 사진을 보시면 Expries가 date.toUTCstring() 메서드 사용

UTCstring 사용 이유
쿠키의 유효 일자는 반드시 GMT(Greenwich Mean Time) 포맷으로 설정해야 합니다.
 
date.toUTCString을 사용하면 해당 포맷으로 쉽게 변경할 수 있습니다. 

출처 https://ko.javascript.info/cookie

• Login Pages 컴포넌트에서 setCookie 인자로 넘겨줄 값을 설정해주면 됨
• Button 컴포넌트 onClick 함수에 setCookie 들이 설정된 login 함수를 호출해주면 끝(사진은 없습니다.)

2. 쿠키 불러오기(getCookie())

 

getCookie의 인자는 name 입니다. 여기서 name로 넘길 값은 user_id 또는 user_pwd 입니다.

3. 쿠키 삭제하기

삭제는 만료일을 현재 시간보다 더 이전의 시간을 기입하면 됩니다.