[JavaScript] Sơ lược về jQuery Cookie

--= Roll With The Wind =--
Quản trị viên
Mục đích: Dành cho ai đang tìm hiểu về jQuery ( trong đó có cả người đang viết mấy dòng này ).
Yêu cầu chung: Đọc hiểu code HTML/JS.
Yêu cầu nâng cao: Chưa biết gì về JS Cookie này.

Chống chỉ định: Các chuyên gia về JS nói chung ( Em sợ bị quê ).

Notepad ++ và XAMPP được khuyến nghị. Ai thích dùng Word 2016 và IIS cũng không sao.

01/ Thư viện cần thiết:
+ jQuery tối thiểu 2.0 (dùng jQuery của NukeViet cũng ngon).
+ Plugin jQuery Cookie.
=> Link: https://github.com/carhartl/jquery-cookie

02/ Tiến hành:
+ Đầu tiên, hãy khởi tạo 1 file tên tuỳ ý, lưu dưới dạng .HTML hoặc .PHP.
Mình sẽ tạo file tên cookie.php, đặt vào thư mục htdocs của XAMPP.
Lý do vì sao như vậy thì tại vì mình thích.

+ Nội dung tham khảo của file này:
Code:
<!DOCTYPE html>
<html lang="vi" xmlns="http://www.w3.org/1999/xhtml" prefix="og: http://ogp.me/ns#">
<head>
<script src="https://nuke.vn/assets/js/jquery/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

<title>Cookie test</title>
</head>
<body>
Alert some cookie ...
</body>
</html>
Nó sẽ trông như thế này, chả có tác dụng gì 1 dòng text vô nghĩa, ah, có chút ý nghĩa ...
img-2017-03-31-03-29-38-1.png

Diễn giải thêm:
+ Chúng ta đã nhúng jQuery từ link ngoài ( mà ở đây là từ nuke.vn).
+ Thư viện jQuery cookie bắt buộc phải gọi phía sau jQuery, thông qua CDN bên trên mình đã gắn code.

-------
Giờ chúng ta sẽ thêm một chút code để kiểm tra xem cookie làm ăn như thế nào.
Mình thêm đoạn code bên dưới vào thẻ head, tất nhiên phải nằm dưới 2 thư viện kia.
Code:
<script>
var check_cookie = $.cookie('just_a_test'); alert(check_cookie);
</script>
+ Diễn giải: Chúng ta tạo 1 biến tên là check_cookie, với giá trị là lấy cookie có tên là just_a_test.
Sau đó, sẽ xuất ra thông báo cảnh báo trên màn hình. Nếu làm đúng, sau khi F5, ta thu được kết quả như sau:

img-2017-03-31-03-29-38-1.png
Bảng cảnh báo trả về undefined.
Lý do, vì chúng ta chưa set một cookie nào có tên như thế, nên tất nhiên sẽ là "chưa định nghĩa".
Điểm đáng mừng đó là, chúng ta đã nhúng và test thành công jQuery cookie.
----------
Tiếp đó, chúng ta sẽ khởi tạo 1 cookie với tên và giá trị tuỳ ý.
Cookie bản thân nó có thời hạn nhất định; chúng ta có thể tuỳ chỉnh thông qua câu lệnh mà plugin đã cung cấp. Ngược lại nếu không định nghĩa, cookie này sẽ là theo phiên, tức là hết hạn sau khi tắt hoàn toàn trình duyệt.
Code:
$.cookie('name', 'value', { expires: 7, path: '/' });
img-2017-03-31-03-29-38-1.png
+ Diễn giải:
Cookie có tên là name, có giá trị là value, sẽ hết hạn sau 7 ngày, lưu tại đường dẫn /.
Hai giá trị về thời hạn của cookie và nơi lưu, chúng ta sẽ bàn sau.
Bài này sẽ bỏ qua path của cookie.

Mình sẽ sửa đoạn code test cookie bên trên thành như sau để khởi tạo cookie.
Code:
var check_cookie = $.cookie('just_a_test'); alert(check_cookie);
if( !check_cookie){ $.cookie('just_a_test', '03/08/2016', { expires: 1 }); }
img-2017-03-31-03-29-38-1.png
+ Diễn giải:
Xuất thông báo cho cookie có tên just_a_test.
Nếu biến check_cookie là rỗng, khởi tạo nó với nội dung 03/08/2016, thời hạn 1 ngày.
Khi đó, F5 lần thứ nhất, chúng ta vẫn nhận được thông báo undefined.


Và khi F5 phát nữa:

img-2017-03-31-03-29-38-1.png
=> Thành cmn công !
+ Diễn giải:
Kiểm tra biến check_cookie, nếu rỗng thì set giá trị và nội dung như code bên trên.

------
Cơ bản, chúng ta đã tạo và chạy 1 cookie thành công.
Nếu mở rộng ra, chúng ta có thể set cookie phức tạp hơn nhằm nhiều mục đích khác nhau.
Các yếu tố như domain chạy cookie(domain), nơi lưu(path), thời hạn (expires)... có thể được cấu hình phức tạp hơn để phục vụ các mục đích của bản thân, ví dụ: chạy quảng cáo theo thời hạn.

Chúc các bạn vui và bị nhiều popup ...
Xin hãy thảo luận mở rộng bên dưới để cùng học và trao đổi.
 

Attachments

Lần sửa cuối: Ba 31, 2017 lúc 10:38 AM
Thích: David An