[SIST] Web_javascript_days08_cookie(쿠키)

1. HTTP의 일종으로서 사용자가 어떠한 웹사이트를 방문할 경우 사용자의 웹브라우저를 통해 사용자의 컴퓨터나 다른 기기에 작은 텍스트 파일로 저장되는 데이터를 cookie(쿠키)라고 한다.

 

2. 웹클라이언트(전용브라우저) -> 요청 -> 웹서버 -> 쿠키 발급

    쿠키 사용 <- 웹클라이언트(전용브라우저) <- 응답 <- 웹서버

-> 브라우저가 요청할 때 쿠키 값을 서버에 전송한다.

 

3. 정보를 서버, 세션, 쿠키 등으로 저장할 수 있다

서버 : 오라클 서버, Session

클라이언트 : javascript 쿠키

 

4. 상태 관리 - 쿠키, DB, 세션 등등에 저장할 수 있다.

ex)

장바구니 등록 -> 장바구니 정보 저장

로그인 후 사이트 방문 -> 마지막 방문 정보 저장(최근 방문 정보)

로그인 인증, 권한을 받은 후 다른 페이지 요청, 응답을 해도 인증 정보 권한을 계속 저장, 유지할 수 있도록

 

5. 브라우저에서 쿠키 사용하지 않겠다고 설정하면 쿠키를 사용할 수 있다.

 

6. javascirpt 또는 JSP 쿠키를 다룰 수 있다.

    javascript는 document.cookie 속성을 사용해서 데이터 쓰기(저장), 데이터 읽기 작업을 할 수 있다.

 

7. 쿠키 형식

[쿠키 구성]

- 쿠키명(이름) => 필수

- 쿠키값 => 필수

- 속성 => 선택사항

 

1) 쿠키명 = 쿠키값 (어떤 쿠키명에 쿠키값을 저장할 것인지) => 필수!

 

2) 만료시점 = "날짜형" -> 설정하지않으면 브라우저가 닫히면서 쿠키값은 자동으로 삭제

    expires = "날짜형"

            날짜형에 들어갈 값은 아래와 같이 설정할 수 있음

              new Date() + 10 == 10일 동안 쿠키를 살려두겠다.

              toGMTString()

 

3) 쿠키를 사용하는 경로 설정

path

기본 값은 path = /

 

4) 도메인

domain=localhost

 

5) 보안

secure

 

8. 한글을 16진수로 16진수 값을 한글로

escape() : 한글을 %가 붙은 16진수 값으로 변환

unescape() : %가 붙은 16진수 값을 한글로 변환

ex)

escape(홍길동) -> %uD64D%uAE38%uB3D9

unescape(%uD64D%uAE38%uB3D9) -> 홍길동

---

쿠키 생성, 확인, 삭제해보기)

 

[쿠키 생성하는 script 코드]

 

[쿠키 삭제하는 script 코드]

 

[쿠키 가져오는 script 코드]

 

[모든 쿠키 가져오는 script 코드]

 

[결과]

- 쿠키이름 age, 값 40 입력후 생성을 누르면 쿠키가 생성이 되고

- 모든 쿠키 확인을 하면 기존에 생성한 모든 쿠키들을 확인할 수 있다.

- 원하는 쿠키이름의 값만 확인하고 싶다면 쿠키이름에 이름만 입력 후 쿠키 확인 버튼을 누르면 쿠키 이름에 해당하는 값을 보여준다.

- 쿠키 삭제는 삭제할 쿠키이름을 넣고 쿠키 삭제 버튼을 누르면 삭제가 된다.

- 쿠키 수정은 원하는 쿠키이름에 값을 넣고 생성을 누르면 자동으로 수정이 된다.

 

* Chrome 기준 쿠키 확인하기

 

쿠키 검색 후 쿠키 및 기타 사이트 데이터 클릭

 

모든 쿠키 및 사이트 데이터 보키 클릭

 

도메인 이름 및 원하는 단어로 검색 후 확인하기

 

---

위의 코드를 javscript 파일로 따로 뺀 뒤에 작성하면 아래와 같다. cookie.js 모듈(라이브러리) 만들기

 

[cookie.js]

 

[html]

---

예제1) 쿠키를 이용하여 배경이미지 설정하기

- 라디오 버튼을 선택하면 배경이미지로 설정한 후 쿠키로 저장

쿠키이름 : bgimg

쿠키값: 이미지명(ex. item01)

만료시점 : + 10일

 

 

[결과]

- 쿠키를 저장해두었기 때문에 브라우저를 종료하고 다시 실행시켜도 마지막으로 설정한 배경이미지로 설정되어있음을 확인할 수 있다.

 

같은 도메인(localhost)을 사용하기 때문에 맨 처음에 쿠키 확인하는 곳에서 bgimg 쿠키를 확인할 수 있다.