Cookies là một dạng lưu trữ dữ liệu trên máy người dùng, nó cho phép các bạn lưu lại dữ liệu nhập từ người dùng theo thời gian ấn định. Ví dụ như khi các bạn viếng thăm một trang web và đăng nhập với username và password, thì các bạn có thể lưu lại thông tin này ngay tại trình duyệt nếu như trang web đó có hỗ trợ Cookies (Với lựa chọn “Remmember me”). Trong bài viết này mình sẽ không nói quá nhiều về định nghĩa Cookies, cũng như lợi ích hay rủi ro của nó. Các bạn có thể tìm hiểu thêm về Cookies trên google.
Hôm nay mình sẽ chia sẻ cho các bạn cách ấn định và sử dụng Cookies cho chính trang web của mình. Trước hết các bạn copy đoạn javascript bên dưới và dán nó vào bên dưới trước thẻ </head>.
<script type='text/javascript'>
//<![CDATA[
// Set cookie
function setCookie(name, value, expires, path, domain, secure) {
document.cookie = name + "=" + escape(value) +
((expires == null) ? "" : "; expires=" + expires.toGMTString()) +
((path == null) ? "" : "; path=" + path) +
((domain == null) ? "" : "; domain=" + domain) +
((secure == null) ? "" : "; secure");
}
// Read cookie
function getCookie(name){
var cname = name + "=";
var dc = document.cookie;
if (dc.length > 0) {
begin = dc.indexOf(cname);
if (begin != -1) {
begin += cname.length;
end = dc.indexOf(";", begin);
if (end == -1) end = dc.length;
return unescape(dc.substring(begin, end));
}
}
return null;
}
//delete cookie
function eraseCookie (name,path,domain) {
if (getCookie(name)) {
document.cookie = name + "=" +
((path == null) ? "" : "; path=" + path) +
((domain == null) ? "" : "; domain=" + domain) +
"; expires=Thu, 01-Jan-70 00:00:01 GMT";
}
}
//]]>
</script>
Trong đoạn code bên trên, mình chia sẻ cho các bạn 3 hàm dùng để xử lý cookies. Hàm setCookie được dùng để ấn định tên và giá trị cho tên cookies đó, getCookie dùng để lấy dữ liệu theo tên cookies và eraseCookie dùng để xóa cookies. Ví dụ như cách dùng sau :
var expiration = new Date();
expiration.setTime(expiration.getTime() + 10000); //Expire after 10 seconds
setCookie("cookiename","hello",expiration);
}
Trong ví dụ bên trên, chúng ta ấn định 1 cookie với tên là cookiename và giá trị của nó là hello, đồng thời chúng ta cũng ấn định thời hạn lưu trữ cho cookie này là 10 giây (tức là sau 10 giây , giá trị này sẽ không còn). Và mỗi khi chúng ta cần lấy giá trị này thì dùng như sau :
var checkCookie = getCookie("cookiename");
Và để kiểm chứng thì các bạn có thể copy đoạn code bên dưới và dán nó vào bên trong thẻ <body> các bạn sẽ thấy giá trị của cookie hiển thị trên màn hình thế nào :
<script type='text/javascript'>
var expiration = new Date();
expiration.setTime(expiration.getTime() + 10000);
setCookie("cookiename","hello",expiration);
var checkCookie = getCookie("cookiename");
document.write(checkCookie);
</script>
Mình mong là qua bài viết này, các bạn có thể hiểu và sử dụng cookies cho những ứng dụng trên trang web hay blog của mình sau này.