[JavaScript] Cookie 생성, 삭제 및 읽어오기[JavaScript] Cookie 생성, 삭제 및 읽어오기

Posted at 2018. 9. 3. 01:55 | Posted in JavaScript & jQuery/JavaScript
반응형





■ 쿠키 개요




-. 쿠키는 키와 값이 들어 있는 작은 데이터 조각으로 이름, 값, 파기 날짜와 경로 정보를 가진다.
-. 쿠키는 서버와 클라이언트에서 모두 저장하고 사용할 수 있다.
-. 쿠키는 일정 기간 동안 데이터를 저장할 수 있으므로, 일정 기간동안 로그인을 유지하는 페이스북 같은 웹 사이트에서 사용한다.
-. 페이스북이든 네이버든 웹 브라우저로 접속한 후 웹 개발 도구를 열고 우측 상단의 저장소를 클릭하면 쿠키를 확인 할 수 있다.






# 01. 쿠키의 생성


쿠키는 각각의 속성을 다음과 같은 문자열에 넣어 document 객체의 cookie 속성에 입력함으로써 생성할 수 있다.


document.cookie = "Name=Value(값);Expires=날짜;Domain=도멘인;Path=경로;Secure";



① Name 속성과 Value 속성

 · Name과 Value 속성은 데이터를 저장하고 읽는 데 사용하는 속성이다.

 · 따라서 쿠키를 사용할 때는 Name과 Value 속성을 반드시 지정해야 한다.

   

② Expires 속성

 · Expires 속성은 쿠키의 파기 날짜를 지정하는 속성이다.

 · Expires 속성에는 GMT 형식이나 UTC 형식으로 날짜를 입력해야 한다.

 · 파기 날짜를 입력하지 않으면 브라우저가 종료될 때 쿠키가 삭제된다.


③ Secure 속성

 · Secure 속성을 지정하면 해당 쿠키는 SSL을 사용해서만 요청할 수 있다.


④ Domain 속성

 · Domain 속성을 입력하지 않으면 현재 도메인의 경로로 자동 입력된다.

 · 페이지 요청과 비교해서 도메인의 경로와 Domain 속성이 일치하지 않으면, 쿠키에 접근하는 것을 막으므로 Domain 속성은 건드리지 않는다.


⑤ Path 속성

 · Path 속성을 입력하지 않으면 현재 도메인의 경로로 자동 입력된다.

 · Path 속성은 일부러 지정하는 경우가 많은데 특정 경로(폴더명)를 설정한다.

 · Path 속성은 /폴더/ 로 설정되는데, 이렇게 설정한 Path 속성이 설정되면 현재 폴더 또는 현재 폴더의 하위에서 접근할 수 있다.

 · Path 속성을 ' / '로 설정하면 도메인 내의 모든 곳에서 접근할 수 있다.

  (쿠키의 범위를 좁게 잡을 수록 보안에는 좋다.)

 



# 소스코드 - 쿠키 생성

 cookie_creation.php

<html>
<head>
<title>:: JavaScript 쿠키 생성 ::</title>
<script type="text/javascript">


    // 변수를 선언
    var date = new Date();
    date.setDate(date.getDate() + 7);

    var willCookie = "";
    willCookie += "CookieName=Value;";
    willCookie += "expires=" + date.toUTCString();

    // 쿠키에 넣는다.
    document.cookie = willCookie;
</script>
</head>
<body>
    <h2>JavaScript를 이용한 쿠키 생성</h2>
</body>
</html>




# 출력 결과 - ① 웹 브라우저




# 출력 결과 - ② 개발자 도구

-. 생성한 Name(이름)과 Value(값) 그리고 Expires(쿠키종료일)이 입력한 값으로 생성된 것을 확인 할 수 있다.

-. 특별히 작성하지 않은 Domain(도메인), Path(경로)의 값이 자동 입력된 것을 확인 할 수 있다.






# 02. 생성한 쿠키 데이터 읽어오기



위와 갖이 만드는 법을 살펴 보았고, 이제는 이렇게 만든 쿠키를 사용하는 방법에 대해서 알아보도록 하자.


쿠키는 document 객체의 cookie 속성을 출력하면 된다.



# 소스 코드

 cookie_identify.php

<html>
<head>
<title>:: JavaScript 쿠키 확인 ::</title>
<script type="text/javascript">
    function cookieIdentify() {
            alert(document.cookie);
    }
</script>
</head>
<body>
    <h2>JavaScript를 이용한 쿠키 생성한 쿠키를 경고창으로 띄워보자.</h2>
    <input type="button" onClick="cookieIdentify();" value="쿠키확인"/>
</body>
</html>



# 출력 결과



위 출력 결과와 같이 저장했던 쿠키를 확인 할 수 있다.


쿠키를 저장할 때 는 여러 속성을 함께 입력했지만 쿠키를 볼 때는 위 결과값과 같이 간단한 형태가 아니다.


페이지가 분명히 새로고침 됐는데도 이전의 정보를 확인 할 수 있는 것을 알 수 있다. 쿠키는 이렇게 데이터를 지속하고 싶을 때 사용한다.





# 03. 쿠키 제거


쿠키를 생성하고 읽어오는 방법을 알아보았으니 이제 제거하는 방법에 대해 알아보자

쿠키를 제거하고 싶을 때는 Expires 속성을 현재 이전의 날짜로 설정하면 된다.


# 소스 코드

 cookie_remove.php

<html>
<head>
<title>:: JavaScript 쿠키 제거 ::</title>
<script type="text/javascript">
    function cookieRemove() {

        // 변수를 선언한다.
        var date = new Date();
        date.setDate(date.getDate() - 1);

        var willCookie = "";
        willCookie += "CookieName=Value;";
        willCookie += "Expires=" + date.toUTCString();

        // 쿠키를 집어넣는다.
        document.cookie = willCookie;

        // 출력한다.
        alert(document.cookie);
    }
</script>
</head>
<body>
    <h2>JavaScript를 이용한 생성한 쿠키제거.</h2>
    <input type="button" onClick="cookieRemove();" value="쿠키제거"/>
</body>
</html>





# 출력 결과 - ① 웹 브라우저




# 출력 결과 - ② 개발자 도구











■ 쿠키 읽기




저장한 쿠키를 읽기 위해서는 document객체의 cookie 속성이 여러 쿠키를 한꺼번에 출력하므로 개별적인 쿠키를 읽으려면 약간의 복잡한 과정이 필요하다.



# 01. 테스트용 Cookie 5개 생성하기



# 소스 코드 - 한번에 5개의 쿠키 생성

 cookie_five.php

<html>
<head>
<title>:: JavaScript 쿠키 다섯 개 생성 ::</title>
<script type="text/javascript">
    function cookieFive() {

        // 변수를 선언한다.
        var date = new Date();
        date.setDate(date.getDate() + 7);

        // 5번을 반복한다.
        for(var i = 0; i < 5; i++) {

            var willCookie = "";
            willCookie += "Name" + i + "=Value";
            willCookie += "Expires=" + date.toUTCString();

            // 쿠키를 집어넣는다.
            document.cookie = willCookie;
        }

        // 출력한다.
        alert(document.cookie);
    }
</script>
</head>
<body>
    <h2>JavaScript를 이용한 생성한 5개의 쿠키 생성.</h2>
    <input type="button" onClick="cookieFive();" value="쿠키생성"/>
</body>
</html>




# 출력 결과






# 02. 생성한 5개의 Cookie 중 1가지 선택 출력하기



이제 쿠키의 Value 속성을 추출해보자.
아래 예제는 Name 속성이 Name4인 쿠키의 Value 속성으로 추출한다.
우선 만들어진 문자열을 세미콜론( ; )을 사용해 분해한다.



# 소스 코드

 cookie_info_output.php

<html>
<head>
<title>:: JavaScript 쿠키 정보출력 ::</title>
<script type="text/javascript">
    function cookieInfoOutpu() {

        // 변수를 선언한다.
        var name = "Name4";
        var cookies = document.cookie.split(";");

        alert(cookies);


        // 쿠키를 추출한다.
        for(var i in cookies) {

            if(cookies[i].search(name) != -1) {

                alert(cookies[i].replace(name + "=", ""));

                // ※ 참고 : 특정 브라우저 문제 발생시 대응 예
                // alert(cookies[i].replace(name + "=", "").replace(/^\S\S*/, "").replace(/^\S\S*$/, ""));
            }
        }
    }
</script>
</head>
<body>
    <h2>JavaScript를 이용한 쿠키 정보 출력.</h2>
    <input type="button" onClick="cookieInfoOutpu();" value="쿠키정보출력"/>
</body>
</html>

-. 세미콜론을 사용해 분해하면 Name=Value 형태의 문자열로 분해된다.
-. 이때 우리가 원하는 Name 속성을 가진 문자열을 찾아 필요 없는 부분을 제거하고 데이터를 추출한다.




# 출력 결과





※ 참고


 웹 브라우저마다의 차이로 양끝에 공백이 발생할 수 있는데, 이때는 다음과 같은 형태로 첫 위치와 마지막 위치의 공백을 제거해서 사용한다.


cookies[i].replace(name + "=", "").replace(/^\S\S*/, "").replace(/^\S\S*$/, "")






■ 쿠키 함수




지금까지 배운 쿠키와 관련된 모든 내용을 이용해 사용하기 쉬운 쿠키 함수를 만들어 보자.




# 01. 쿠키를 생성하는 함수



# 소스 코드

 set_cookie.php

<html>
<head>
<title>:: JavaScript 쿠키 저장 함수 ::</title>
<script type="text/javascript">
    function setCookie(name, value, day) {

        // 변수를 선언한다.
        var date = new Date();
        date.setDate(date.getDate() + day);

        var willCookie = "";
        willCookie += name + "=" + encodeURIComponent(value) + ";";
        willCookie += "Expires=" + date.toUTCString() + "";

        // 쿠키에 넣습니다.
        document.cookie = willCookie;

        alert(document.cookie);
    }
</script>
</head>
<body>
    <h2>JavaScript를 이용한 생성한 쿠키 저장 함수.</h2>
    <input type="button" onClick="setCookie('choco', 'chip', 7);" value="쿠키저장"/>
</body>
</html>



# 출력 결과





# 02. 쿠키를 읽어오는 함수



# 소스 코드

 get_cookie.php

<html>
<head>
<title>:: JavaScript 쿠키 출력 함수 ::</title>
<script type="text/javascript">
    function getCookie(name) {

        // 변수를 선언한다.
        var cookies = document.cookie.split(";");

        // 쿠키를 추출한다.
        for(var i in cookies) {
            if(cookies[i].search(name) != -1) {

                alert(decodeURIComponent(cookies[i].replace(name + "=", "")));
            }
        }
    }
</script>
</head>
<body>
    <h2>JavaScript를 이용한 생성한 쿠키 오픈 함수.</h2>
    <input type="button" onClick="getCookie('choco');" value="쿠키출력"/>
</body>
</html>



# 출력 결과






# 03. 쿠키를 삭제하는 함수



# 소스 코드

 remove_cookie.php

<html>
<head>
<title>:: JavaScript 쿠키 제거 함수 ::</title>
<script type="text/javascript">
    function removeCookie(name) {

        // 변수를 선언한다.
        var date = new Date();
        date.setDate(date.getDate() - 1);

        var willCookie = "";
        willCookie += "CookieName=Value;";
        willCookie += "Expires=" + date.toUTCString();

        // 쿠키를 집어넣는다.
        document.cookie = willCookie;

        alert(name + " 쿠키가 삭제되었습니다.");
    }
</script>
</head>
<body>
    <h2>JavaScript를 이용한 생성한 쿠키 제거 함수.</h2>
    <input type="button" onClick="removeCookie('choco');" value="쿠키제거"/>
</body>
</html>



# 출력 결과




연관 포스팅 : [JavaScript] Session 데이터 읽고, 쓰기









반응형
저작자표시

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

[JavaScript] 저장소 사용하기  (0) 2018.09.07
[JavaScript] Session 데이터 읽고, 쓰기  (0) 2018.09.04
[JavaScript] 전화번호 Hyphen(-)기호 자동 삽입  (7) 2018.08.21
[JavaScript] 천단위 이상의 입력값에 자동콤마( , ) 삽입  (0) 2018.08.20
[JavaScript] 시간(HH:MM)만을 입력하는 텍스트 박스  (3) 2018.08.17
//

[Kakao] KakaoTalk으로 링크 공유하기 API[Kakao] KakaoTalk으로 링크 공유하기 API

Posted at 2018. 8. 31. 01:17 | Posted in API/Kakao
반응형



■ 카카오 디벨로퍼 애플리케이션 생성



01. 카카오 디벨로퍼(https://developers.kakao.com/) 사이트에 접속한다.
     카카오 디벨로퍼에 가입하지 않은 사람이라면 우선 여기서 가입을 하고 다음 작업을 진행한다.






02. 이제 내 애플리케이션(https://developers.kakao.com/apps) 페이지로 이동해서 앱 만들기 버튼을 클릭해 주자.





03. 제작할 앱의 아이콘과 이름을 작성하고, 앱 만들기 버튼을 클릭하면 앱이 생성된다.





04. 앱이 다 만들어지면 자바스크립트 키를 발급받게 되는데 이 키를 잘 기억해 두자.




05. 마지막으로 생성한 애플리케이션에 사이트 도메인을 입력한다.
① 위에서 생성한 애플리케이션을 선택한다.
② 좌측 카테고리의 설정 → 일반을 선택한다.
③ 사이트 도메인부분에 사용할 사이트 도메인을 입력한다.
    (해당 포스팅은 http://localhost 를 사용하였다.)
④ 저장 버튼을 눌러 설정을 저장하면 사용할 준비가 완료되었다.









■ 카카오 톡 공유 템플릿 제작하기



#01. 카카오톡 피드 템플릿 제작



# 소스코드

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>:: 카카오톡 공유하기 ::</title>
<script type="text/JavaScript" src="https://developers.kakao.com/sdk/js/kakao.min.js"></script>
<script type="text/javascript">
    function shareKakaotalk() {
        Kakao.init("XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX");      // 사용할 앱의 JavaScript 키를 설정
        Kakao.Link.sendDefault({
              objectType:"feed"
            , content : {
                  title:"WARCRAFT3 THE REIGN OF CHAOS"   // 콘텐츠의 타이틀
                , description:"너흰아직 준비가 안되었다!"   // 콘텐츠 상세설명
                , imageUrl:"illidan_stormrage.jpg"   // 썸네일 이미지
                , link : {
                      mobileWebUrl:"http://magic.wickedmiso.com/"   // 모바일 카카오톡에서 사용하는 웹 링크 URL
                    , webUrl:"http://magic.wickedmiso.com/" // PC버전 카카오톡에서 사용하는 웹 링크 URL
                }
            }
            , social : {
                  likeCount:0       // LIKE 개수
                , commentCount:0    // 댓글 개수
                , sharedCount:0     // 공유 회수
            }
            , buttons : [
                {
                      title:"게시글 확인"    // 버튼 제목
                    , link : {
                        mobileWebUrl:"http://magic.wickedmiso.com/"   // 모바일 카카오톡에서 사용하는 웹 링크 URL
                      , webUrl:"http://magic.wickedmiso.com/" // PC버전 카카오톡에서 사용하는 웹 링크 URL
                    }
                }
            ]
        });
    }
</script>
</head>
<body>
    <h1>카카오톡 공유하기</h1>
    <input type="button" onClick="shareKakaotalk();" value="KAKOA Talk으로 공유하기"/>
</body>
</html>



# 출력결과





#02. 카카오톡 위치 템플릿 제작


# 소스코드

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>:: 카카오톡 공유하기 ::</title>
<script type="text/JavaScript" src="https://developers.kakao.com/sdk/js/kakao.min.js"></script>
<script type="text/javascript">
    function shareKakaotalk() {
        Kakao.init("XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX");      // 사용할 앱의 JavaScript 키를 설정
        Kakao.Link.sendDefault({
              objectType:"location"
            , address:"노스렌드"    // 공유할 위치의 주소
            , addressTitle:"얼음왕관의 성채"   // 카카오톡 내의 지도 뷰에서 사용되는 타이틀
            , content: {
                  title:"WARCRAFT3 THE FROZEN THRONE"   // 콘텐츠의 타이틀
                , description:"왕위를 계승하는 중입니다. 아버지"  // 콘텐츠 상세설명
                , imageUrl:"arthas_menethil.jpg"    // 썸네일 이미지
                , link: {
                      mobileWebUrl:"http://magic.wickedmiso.com/"   // 모바일 카카오톡에서 사용하는 웹 링크 URL
                    , webUrl:"http://magic.wickedmiso.com/" // PC버전 카카오톡에서 사용하는 웹 링크 URL
                }
            }
            , social: {
                  likeCount:0       // LIKE 개수
                , commentCount:0    // 댓글 개수
                , sharedCount:0     // 공유 회수
            }
            , buttons: [
                {
                      title:"버튼 제목" // 버튼 제목
                    , link: {
                          mobileWebUrl:"http://magic.wickedmiso.com/"   // 모바일 카카오톡에서 사용하는 웹 링크 URL
                        , webUrl:"http://magic.wickedmiso.com/" // PC버전 카카오톡에서 사용하는 웹 링크 URL
                    }
                }
            ]
        });
    }
</script>
</head>
<body>
    <h1>카카오톡 공유하기</h1>
    <input type="button" onClick="shareKakaotalk();" value="KAKOA Talk으로 공유하기"/>
</body>
</html>




# 출력결과






반응형
저작자표시

'API > Kakao' 카테고리의 다른 글

[Kakao] Kakao 계정으로 Login 하기  (0) 2020.01.31
//

[PHP] mcrypt 방식 OpenSSL 방식으로 대체하기[PHP] mcrypt 방식 OpenSSL 방식으로 대체하기

Posted at 2018. 8. 30. 10:56 | Posted in PHP
반응형





참고 : https://www.codegrepper.com/code-examples/php/encrypted+and+decrypted+in+php

참고 : https://gracefullight.github.io/2017/07/07/PHP-7-1에서-mcrypt-대체하기/





실제 업무중 API 연결과정정중에 문제가 발생하였다.


보안문제로 mcrypt 방식은 사용하지 않기로 하였기때문에 OpenSSL 방식으로 대체하여 해결 하였고.


그 방법은 아래와 같다.




# 암호화(Encrypt)


mcrypt 방식

 $output = mcrypt_encrypt (MCRYPT_RIJNDAEL_128, $key, $val, MCRYPT_MODE_CBC, str_repeat (chr (0), 16));



    /**
    * AES256 암호화 *
    * @param unknown $key 암호화키
    * @param unknown $value 전달받은 데이터
    * @return string
    */






$output = openssl_encrypt(pkcs5_unpad($val), "AES-256-CBC", $key, OPENSSL_RAW_DATA, str_repeat(chr(0), 16));




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




$output = openssl_encrypt(pkcs5_unpad($value), "AES-256-CBC", $key, OPENSSL_RAW_DATA, str_repeat(chr(0), 16));


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


    /**
    * AES256 복호화 *
    * @param unknown $key 복호화 키
    * @param unknown $value 전달받은 데이터
    * @return string
    */


$output = pkcs5_pad(openssl_decrypt($value, "AES-256-CBC", $key, OPENSSL_RAW_DATA, str_repeat(chr(0), 16)));



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



    /**
    * 패딩 알고리즘
    * mcrypt방식에서 openssl 방식으로 변환을 위한 추가 함수
    */
    function pkcs5_pad($text, $blocksize = 16) {
        $pad = $blocksize - (strlen($text) % $blocksize);
        return $text.str_repeat(chr($pad), $pad);
    }

    function pkcs5_unpad($text) {
        $pad = ord($text{strlen($text)-1});
        if($pad > strlen($text)) {
            return $text;
        }
        if(!strspn($text, chr($pad), strlen($text) - $pad)) {
            return $text;
        }
        return substr($text, 0, -1 * $pad);
    }






반응형
저작자표시

'PHP' 카테고리의 다른 글

[PHP] DB 입력 or 출력시 따옴표(') 처리하기  (0) 2018.10.02
[PHP] 변수 or 배열의 정보를 표기하는 함수  (0) 2018.09.17
cURL 연결 함수  (0) 2018.08.30
[PHP] 문장 / 문자열의 의 대소문자를 변환해주는 함수  (0) 2018.08.30
[PHP] PHPExcel 서식 변경하기  (2) 2018.08.29
//

cURL 연결 함수cURL 연결 함수

Posted at 2018. 8. 30. 10:35 | Posted in PHP
반응형




참조 : 하보니 PHP 158페이지, 598페이지,

참조 : http://xshine.tistory.com/251




반응형
저작자표시

'PHP' 카테고리의 다른 글

[PHP] 변수 or 배열의 정보를 표기하는 함수  (0) 2018.09.17
[PHP] mcrypt 방식 OpenSSL 방식으로 대체하기  (0) 2018.08.30
[PHP] 문장 / 문자열의 의 대소문자를 변환해주는 함수  (0) 2018.08.30
[PHP] PHPExcel 서식 변경하기  (2) 2018.08.29
[PHP] 변수에 달러 기호가 삽입되는경우  (0) 2018.08.10
//

티스토리툴바