잠시만 기다려 주세요


 
HOME   |  여기는?   |  바다물때표   |  여러가지 팁 (806)  |  추천 및 재미 (77)  |  자료실 (17)  |  끄적거림 (467)  |  시나리오 (760)  |  드라마 대본 (248)  |  

2019년 10월 19일
말을 옮기지 말자. 결국 칼날이 되어 자신에게 돌아온다. - 바다아이
 




    javascript/jquery

javascript/jquery - 자바스크립트 쿠키 클래스, cookie class
이 름 : 바다아이   |   조회수 : 60         짧은 주소 : https://www.bada-ie.com/su/?161569859437
서버측 언어에서 쿠키 핸들링하는 함수들을 제공하지만 개발하다보면 클라이언트에서 자바스크립트로 쿠키를 조작해야하는 경우들이 있다.

자바스크립트로 쿠키를 핸들링하는 함수들은 많이 있지만 쿠키생성할때의 옵션들도 다시 확인해보면서 클래스로 묶고 사용하기 편하게 다시 정리해보았다.

 

■ 자바스크립트 쿠키 클래스

 

 
  1. var Cookie =
  2. {
  3.     cookie_arr : null,
  4.  
  5.     set : function (name,value,options)
  6.     {
  7.         options = options || {};
  8.  
  9.         this.cookie_arr = [escape(name) + '=' + escape(value)];
  10.  
  11.         //-- expires
  12.         if (options.expires)
  13.         {
  14.             if( typeof options.expires === 'object' && options.expires instanceof Date )
  15.             {
  16.                 var date = options.expires;
  17.                 var expires = "expires=" + date.toUTCString();
  18.                 this.cookie_arr.push (expires);
  19.             }
  20.         }
  21.         else if (options.expires_day)
  22.         {
  23.             this.set_expires_date (options.expires_day , 24*60*60);
  24.         }
  25.         else if (options.expires_hour)
  26.         {
  27.             this.set_expires_date (options.expires_hour , 60*60);
  28.         }
  29.  
  30.         //-- domain
  31.         if (options.domain)
  32.         {
  33.             var domain = "domain=" + options.domain;
  34.             this.cookie_arr.push (domain);
  35.         }
  36.  
  37.         //-- path
  38.         if (options.path)
  39.         {
  40.             var path = 'path=' + options.path;
  41.             this.cookie_arr.push (path);
  42.         }
  43.  
  44.         //-- secure
  45.         if( options.secure === true )
  46.         {
  47.             var secure = 'secure';
  48.             this.cookie_arr.push (secure);
  49.         }
  50.  
  51.         document.cookie = this.cookie_arr.join('; ');
  52.         //console.log (this.cookie_arr.join('; '));
  53.     },
  54.  
  55.     get : function (name)
  56.     {
  57.         var nameEQ = escape(name) + "=";
  58.         var ca = document.cookie.split(';');
  59.  
  60.         for(var i=0;i < ca.length;i++)
  61.         {
  62.             var c = ca[i];
  63.             while (c.charAt(0)==' ') c = c.substring(1,c.length);
  64.             if (c.indexOf(nameEQ) == 0) return unescape(c.substring(nameEQ.length,c.length));
  65.         }
  66.         return null;
  67.     },
  68.  
  69.     del : function (name , options)
  70.     {
  71.         options = options || {};
  72.         options.expires_day = -1;
  73.         this.set ( name , '' , options );
  74.     },
  75.  
  76.     set_expires_date : function (expires , time)
  77.     {
  78.         var date = new Date();
  79.         date.setTime(date.getTime()+(expires*time*1000));
  80.         var expires = "expires=" + date.toUTCString();
  81.         this.cookie_arr.push (expires);
  82.     }
  83. };


 

■ 옵션들에 대한 설명

 

 
  1.    옵션              내용           형식                                                                   지정 안했을경우 기본값     설명        
  2. --------------    --------------   ------------------------------------------------------------------    -----------------------    ------------------------------------------------------------------------------------------------
  3. expires           쿠키 만료일       new Date(year, month, day, hours, minutes, seconds, milliseconds)      브라우져 종료시점까지      쿠키 만료일을 정확하게 지정. new Date(2013,8,10,0,0,0) 같이 초까지만 지정하면 된다.
  4. expires_day       쿠키 생존       숫자                                                                   브라우져 종료시점까지      쿠키 만료일을 현재시간으로부터 몇일후로 지정
  5. expires_hour      쿠키 생존 시간    숫자                                                                   브라우져 종료시점까지      쿠키 만료일을 현재시간으로부터 몇시간후로 지정
  6. domain            도메인           www.example.com 또는 sub.example.com 또는 example.com                  현재의 도메인              쿠키가 적용될 도메인으로 example.com 으로 지정시 앞에 모든 서브도메인에서 모두 사용 가능
  7. path              경로             / 또는 /dir                                                            /                          쿠키가 적용될 디렉토리로 /dir 입력시 /dir 시작하는(/direc , /dirpath 등) 모든 디렉토리에 적용
  8. secure            ssl             true 또는 false                                                        false                      true 설정하면 보안을 위해 ssl https 프로토콜일때만 쿠키 생성

  - 모든 옵션은 말 그대로 필요한것이 있을경우 지정하면 되고, 지정 안하면 기본값으로 세팅된다.

  - expires , expires_day , expires_hour 는 경우에 맞게 적당한것으로 한가지를 골라 사용하면 된다. 3개중 2개 이상을 중복해서 사용하면 위 적힌 순서대로 먼저 적은것이 적용되게 된다. 즉 expires 와 expires_day 를 동시에 옵션을 주면 expires 가 적용되고 expires_day는 무시된다.

 

■ 사용 예제

 

  ◎ 쿠키 만들기


    1. 기본옵션으로 쿠키 만들기
      - 브라우저가 종료되면 없어지고, 현재 도메인에서, 모든 디렉토리 (/) 에서 사용가능한 쿠키가 만들어진다.
 

 
  1. Cookie.set ('cookie_name1' , 'cookie_value1');


    2. 모든 옵션
 

 
  1. Cookie.set ('cookie_name2' , 'cookie_value2' , {
  2.     expires : new Date(2013,8,10,0,0,0),
  3.     domain: 'example.com',
  4.     path : '/dir',
  5.     secure : true
  6. });


    3. 만료일 : 일(day)단위
      - 현재시간으로부터 1일동안 사용가능한 쿠키 만들기
      - 위 2번에서 expires 옵션 대신 사용하면 된다.
 

 
  1. Cookie.set ('cookie_name3' , 'cookie_value3' , {
  2.     expires_day : 1
  3. });


    4. 만료일 : 시간(hour)단위
      - 현재시간으로부터 12시간동안 사용가능한 쿠키 만들기
      - 위 2번에서 expires 옵션 대신 사용하면 된다.
 

 
  1. Cookie.set ('cookie_name4' , 'cookie_value4' , {
  2.     expires_hour : 12
  3. });


    5. 특수문자(; 와 =) 처리
      - 쿠키는 document.cookie 에 = 과 ; 을 이용하여 값들을 문자열로 연결하여 저장하고, 값을 가져올때에도 = 과 ; 을 기준으로 잘라서 가져오기때문에 2개 문자를 포함한 특수문자들을 처리해준다.
 

 
  1. Cookie.set ('cookie_name=;=' , ';=cookie_value3=a=;b');
 


  쿠키값 가져오기


    6. 쿠키값 가져오기
 

 
  1. Cookie.get ('cookie_name1');


    7. 5번에서 특수문자가 포함된 이름과 값으로 생성된 쿠키값 확인
 

 
  1. Cookie.get ('cookie_name=;=');

   쿠키 삭제


    8. 1번에서 기본옵션값으로 생성한 쿠키값 삭제
 

 
  1. Cookie.del ('cookie_name1');


    9. 2번에서 옵션값을 정해서 생성한 쿠키값 삭제
      - 만료일을 제외한 모든 옵션을 생성할때와 똑같이 지정해서 삭제해야 함
 

 
  1. Cookie.del ('cookie_name2' , {
  2.     domain: 'example.com',
  3.     path : '/dir',
  4.     secure : true
  5. });


출처 : http://steadypost.net/post/knowhow/id/161/
 
| |


      1 page / 3 page
번 호 카테고리 제 목 이름 조회수
현재글 javascript/jquery , cookie class 바다아이 61
72 javascript/jquery select 3 바다아이 276
71 javascript/jquery , ... 바다아이 788
70 javascript/jquery , timezone, , ... moment.js 바다아이 778
69 javascript/jquery textarea cursor . focus, cursor ... 바다아이 866
68 javascript/jquery (block) , ... 바다아이 842
67 javascript/jquery textarea cursor , , focus 바다아이 932
66 javascript/jquery jquery ajax option .... 바다아이 960
65 javascript/jquery jquery open api , ajax JSONP cross domain , , error 0 ... sop 바다아이 967
64 javascript/jquery javascript , , , , () 바다아이 1029
63 javascript/jquery javascript (date ) 바다아이 1127
62 javascript/jquery CSS3 javascript 바다아이 1072
61 javascript/jquery javascript , cookie, , , , , 바다아이 1228
60 javascript/jquery javascript 바다아이 1384
59 javascript/jquery javascript / , , , 바다아이 1488
58 javascript/jquery url , , encode, decode ... 바다아이 1134
57 javascript/jquery javascript ... frame location.href 바다아이 1249
56 javascript/jquery File Upload Progress, .... . 바다아이 1380
55 javascript/jquery javascript, json , json Highlight 바다아이 1450
54 javascript/jquery javascript json , , JSON.stringify, JSON.parse, 바다아이 1481
53 javascript/jquery javascript innerHTML, innerTEXT ... 바다아이 1365
52 javascript/jquery javascript entity , , encode, decode 바다아이 1437
51 javascript/jquery javascript post, get , 바다아이 1885
50 javascript/jquery text copy, , How to copy a TEXT to Clipboard on a Button-Click 바다아이 1685
49 javascript/jquery jquery autocomplete , , . 바다아이 1488
48 javascript/jquery javascript, jquery, , autocomplete 바다아이 1597
47 javascript/jquery substring, substr, indexOf, lastIndexOf (javascript , , ) 바다아이 1519
46 javascript/jquery Javascript event.keyCode , , ACSII 바다아이 1280
45 javascript/jquery url encode decode , , , javascript 바다아이 1991
44 javascript/jquery javascript 바다아이 1307
| |




Copyright ⓒ 2001.12. bada-ie.com. All rights reserved.
이 사이트는 리눅스에서 firefox 기준으로 작성되었습니다. 기타 브라우저에서는 다르게 보일 수 있습니다.
[ FreeBSD + GoLang + PostgreSQL ]
서버위치 : 서울 Amazon Lightsail  실행시간 : 0.38454
to webmaster... gogo sea. gogo sea.