Mar
30
2009

วิธีใช้งาน jQuery Cookie Plugin

An article by บริษัท เก้ายอดสตูดิโอ จำกัด

วันนี้ผมจะมานำเสนอ Plugin อีกตัวหนึ่งที่น่าสนใจครับ เพราะว่านำมาใช้งานบ่อยเหมือนกัน สดๆร้อนก็พึ่งใช้กับระบบ Remember user และ password ของ Form login ก็ใช้งานง่ายดีครับ ทั้งวิธีการ get cookie หรือ delete cookie

ก่อนอื่นก็ต้องไปโหลด Plugin cookie ตัวนี้มาก่อนนะครับ สามารถโหลดได้ที่ link นี้ครับ
Download : jQuery Cookie Plugin

ระหว่างที่กำลังเขียน บทความนี้ ตัว plugin นี้เป็นเวอร์ชั่น 1.0 อยู่นะครับเอาละมาเริ่มวิธีการใช้งานกันเลยครับ

ขั้นตอนที่ 1
หลังจากที่ Download ได้ file jquery.cookie.js มาแล้วนะครับ เวลาจะใช้งานก็ให้ทำการเรียก file นี้ขึ้นมาใช้งานด้วย โดยที่เวลาเรียก จะต้องเรียก file jquery ขึ้นมาก่อนนะครับ โดยที่เวลาเรียกก็เรียกใว้ใน element head นะครับ

<html>
   <head>
      <script type="text/javascript" src="jquery.js"></script>
      <script type="text/javascript" src="jquery.cookie.js"></script>
   </head>
   <body>
   </body>
</html>

ขั้นตอนที่ 2
ขั้นตอนนี้จะเป็นการเขียน Function ใว้เรียกใช้งานนะครับ โดยผมจะเขียนตัวอย่างการ set cookie , get cookie และ delete cookie ให้ดูเป็นแนวทางในการนำไปเขียนเพื่อใช้งานนะครับ

<html>
   <head>
      <script type="text/javascript" src="jquery.js"></script>
      <script type="text/javascript" src="jquery.cookie.js"></script>
      <script type="text/javascript">

                var COOKIE_NAME = 'test_cookie';
                var options = { path: '/', expires: 10 };

                function setCookie(){
                    $.cookie(COOKIE_NAME, 'test', options);
                    return false;
                }

                function getCookie(){
                    alert($.cookie(COOKIE_NAME));
                    return false;
                }

                function deleteCookie(){
                    $.cookie(COOKIE_NAME, null, options);
                    return false;
                }
      </script>
   </head>
   <body>
      <a href="javascript:setCookie()">Set Cookie</a><br>
      <a href="javascript:getCookie()">Get Cookie</a><br>
      <a href="javascript:deleteCookie()">Delete Cookie</a><br>
   </body>
</html>

จากตัวอย่าง Function ที่ผมเขียนขึ้นมานี้ก็เป็น code ง่ายๆนะครับสำหรับเรียกใช้ cookie ทั้งการ set,get,delete สามารถทำได้ง่ายๆเลย ในตัวอย่างนี้ จะเห็นว่ามีการประกาศตัวแปรอยู่สองตัวด้วยกัน

       var COOKIE_NAME = 'test_cookie';
       var options = { path: '/', expires: 10 };

ตัวแปรแรกนั้นเป็นการกำหนดชื่อของ cookie และตัวที่สอง เป็นการกำหนดวันหมดอายุของ cookie ในตัวอย่างนี้กำหนดวัน 10 วัน
ส่วน Function ต่างๆก็ทำหน้าที่ตามชื่อของมันเลยครับ

                function setCookie(){
                    $.cookie(COOKIE_NAME, 'test', options);
                    return false;
                }

                function getCookie(){
                    alert($.cookie(COOKIE_NAME));
                    return false;
                }

                function deleteCookie(){
                    $.cookie(COOKIE_NAME, null, options);
                    return false;
                }

ลองเอาไปทดสอบใช้กันดูนะครับผม
By [root@localhost]#