376. (javaScript) [간단 소스] 자바스크립트 쿠키 값 설정 , 확인 , 삭제 방법 설명 - Cookie Set , Get , Delete

---

[개발 환경 설정]

​

개발 툴 : Edit++

개발 언어 : JavaScript

 

---

[소스 코드]

​

-----------------------------------------------------------------------------------------
[사전 설명 및 설정 사항]
-----------------------------------------------------------------------------------------

- 개발 환경 : Web

- 개발 기술 : JavaScript (자바스크립트) / Cookie / Setting

- 사전 쿠키 설명 정리) : 

  >> 쿠키를 사용하면 웹사이트에서 사용자의 정보를 저장하고, 페이지를 새로 고침하거나 다른 페이지로 이동할 때 그 정보를 유지할 수 있습니다.

  >> 자바스크립트에서 쿠키를 설정하려면 document.cookie를 사용합니다. 
  
  >> 쿠키는 key=value 형식으로 저장되며, 추가적으로 만료 날짜나 경로 등의 옵션을 설정할 수 있습니다.

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[소스 코드]
-----------------------------------------------------------------------------------------

----------------------------------------------------
[setCookie : 쿠키 값 설정 함수]
----------------------------------------------------
쿠키의 이름, 값, 만료일을 매개변수 (Int 일자 단위 : ex - 1일 은 1 값)
----------------------------------------------------
function setCookie(name, value, days) { 

    const expires = new Date(); // [현재 날짜 및 시간 확인]

    expires.setTime(expires.getTime() + (days * 24 * 60 * 60 * 1000)); // [만료일 설정]
    const expiresString = "expires=" + expires.toUTCString(); // [만료일을 UTC 형식으로 설정]

    document.cookie = `${name}=${value}; ${expiresString}; path=/`; // 쿠키 설정

}





----------------------------------------------------
[getCookie : 저장 된 특정 key 쿠키 값 확인 함수]
----------------------------------------------------
쿠키는 문자열로 반환되며, 여러 개의 쿠키가 있을 경우 세미콜론(;)으로 구분됩니다. 쿠키 값을 찾으려면 문자열을 파싱해야 합니다.
----------------------------------------------------
function getCookie(name) {

    const nameEQ = name + "=";
    const ca = document.cookie.split(';'); // [세미 콜론 기준 파싱 수행]

    for (let i = 0; i < ca.length; i++) {
        let c = ca[i].trim();
        if (c.indexOf(nameEQ) === 0) { // [문자열 포함 확인]
            return c.substring(nameEQ.length, c.length); // [쿠키 값 반환]
        }
    }
    return null; // 해당 쿠키가 없으면 null 반환
}





----------------------------------------------------
[deleteCookie : 저장 된 특정 key 쿠키 값 삭제 함수]
----------------------------------------------------
쿠키를 삭제하려면 만료일을 과거로 설정하면 됩니다.
----------------------------------------------------
function deleteCookie(name) {
    setCookie(name, "", -1); // [만료일을 -1로 설정하여 삭제]
}





----------------------------------------------------
[전체 소스 코드 사용 예시]
----------------------------------------------------
쿠키의 기본 경로는 path=/로 설정되어 있어, 모든 페이지에서 접근할 수 있습니다.
쿠키에 대한 보안 옵션(Secure, SameSite)을 추가할 수도 있습니다.
쿠키는 기본적으로 클라이언트 측에 저장되며, 서버와의 통신에서 사용될 때는 자동으로 포함됩니다.
----------------------------------------------------

// [쿠키 설정]
setCookie("username", "twok2k", 7); // [7일 동안 유효한 쿠키 설정]


// [쿠키 값 확인]
const username = getCookie("username");
if (username) {
    console.log("쿠키 값 :: " + username); // [쿠키 값 출력]
} else {
    console.log("쿠키가 없습니다.");
}


// [쿠키 삭제]
deleteCookie("username");

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[참고 사이트]
-----------------------------------------------------------------------------------------

[IOS 에서 웹뷰 통신 방법으로 자바스크립트 쿠키 설정 방법]

https://blog.naver.com/kkh0977/223248630743?trackingCode=blog_bloghome_searchlist


[IOS 에서 웹뷰 통신 방법으로 자바스크립트 쿠키 설정 방법]

https://blog.naver.com/kkh0977/222687800341?trackingCode=blog_bloghome_searchlist

-----------------------------------------------------------------------------------------

 

---

[참고 사이트]

​

https://blog.naver.com/kkh0977/223248630743?trackingCode=blog_bloghome_searchlist

357. (ios/swift5) [유틸 파일] HTTP 쿠키 값을 자바스크립트 document.cookie 쿠키 스트링 값으로 포맷 실시

---