JavaScript - BOM Cookie trong Javascript
by My Love
29/03/2019, 3:41 PM | 08/04/2019, 8:29 AM | 723 | 032
Cookie là một đối tượng quan trọng trong các trình duyệt, việc nắm được cách thao tác với cookie sẽ giúp ích cho quá trình xây dựng website. Bài này ta cùng tìm hiểu về cookie trong javascript.
1. Cookie là gì ?
Cookie là môt file dữ liệu được lưu trên máy tính người dùng ( client ). Bạn có thể đặt thời gian tồn tại cho cookie là mãi mãi hay một thời gian nhất định nào đó. Ví dụ khi bạn xây dựng chức năng Remember để lưu thông tin tài khoản cho những lần đăng nhập sau thì bạn sử dụng cookie để lưu thông tin này trên máy client.
2. Các thao tác với cookie trong Javascript
Tạo cookie
Cookie được lưu dưới dạng
name=value nên để tạo cookie dùng như sau :
window.document.cookie = "userName=vnfree";
// hoặc
document.cookie = "userName=vnfree";
Bạn có thể thiết lập thời gian tồn tại cho cookie bằng từ khóa
expires. Mặc định cookie sẽ bị xóa khi đóng trình duyệt.
Ví dụ :
document.cookie = "userName=Vnfree; expires=Thu, 21 Dec 2019 15:22:00 UTC";
Theo mặc định thì
cookie thuộc về trang hiện tại ( các trang khác sẽ không lấy được giá trị cookie ). Nếu bạn muốn thay đổi đường dẫn thì thêm từ khóa path :
Ví dụ :
document.cookie = "userName=Vnfree; expires=Thu, 21 Dec 2019 15:22:00 UTC; path=/";
Đọc cookie, lấy danh sách các cookie
Để lấy danh sách các cookie ta dùng như sau :
var ListCookie = document.cookie;
Kết quả trả về là một
chuỗi các cookie dưới dạng
name=value và cách nhau bởi dấu
chấm phẩy. Trường hợp có nhiều cookie sẽ có dạng :
nameCookie1=value1; nameCookie2=value2;
Thay đổi giá trị cookie
Để thay đổi giá trị của cookie thì bạn tạo cookie mới có tên cùng với tên cookie cũ bạn muốn thay đổi. Cookie cũ sẽ bi ghi đè.
// cookie cũ userName có giá trị là Vnfree
document.cookie = "userName=Vnfree; expires=Thu, 21 Dec 2019 15:22:00 UTC; path=/";
// thay đổi giá trị cookie userName thành Vnfree.Net
document.cookie = "userName=Vnfree.Net; expires=Thu, 21 Dec 2019 15:22:00 UTC; path=/";
Xóa cookie
Để xóa cookie bạn chỉ cần đặt thời gian tồn tại expires của nó là thời gian đã qua. Ví dụ :
document.cookie = "username=; expires=Thu, 09 Jan 1990 00:00:00 UTC; path=/;";
Hàm sử lý cookie
Cookie lưu dưới dạng chuỗi nên khi bạn có nhiều cookie và muốn lấy giá trị nào đó, bạn cần viết hàm để sử lý chuỗi. Bạn có thể tham khảo 2 hàm thêm mới cookie và lấy cookie ở trang w3schools như sau :
// hàm thêm mới cookie
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
// hàm lấy giá trị cookie truyền vào tên cookie
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
Để rõ hơn mình làm một ví dụ kết hợp với 2 hàm trên
Ví dụ :
<html>
<head>
</head>
<body>
<p> - Nhập tên, giá trị và Ngày tồn tại của Cookie cần thêm :</p>
<input type="text" placeholder="Nhập tên cookie" value="" id="tbNameAdd"/>
<input type="text" placeholder="Nhập Value cookie" value="" id="tbValueAdd"/>
<input type="text" placeholder="Ngày" value="" id="tbDayAdd" style="width:50px"/>
<input type="button" value="Thêm cookie" onclick="Add()"/><br/>
<p> - Nhập tên Cookie cần Kiểm tra :</p>
<input type="text" value="" id="tbNameCheck"/>
<input type="button" value="Kiểm tra cookie" onclick="check()"/><br/>
<p> - Nhập tên Cookie cần Xóa :</p>
<input type="text" value="" id="tbName"/>
<input type="button" value="Xóa cookie" onclick="deleteCookie()"/><br/>
<p> - Danh sách tất cả Cookie :</p>
<p id="Display"></p>
<script type="text/javascript">
// hàm hiển thị tất cả cookie
function showAll(){
var name = document.getElementById("Display");
name.innerHTML = document.cookie;
}
showAll();
// hàm xóa cookie
function deleteCookie(){
var name = document.getElementById("tbName").value;
document.cookie = name +'=; expires=Thu, 01 Jan 1970 00:00:01 GMT; Path=/;';
showAll();
}
// hàm thêm mới cookie
function Add() {
var cname = document.getElementById("tbNameAdd");
var cvalue = document.getElementById("tbValueAdd");
var exdays = document.getElementById("tbDayAdd");
if(cname.value == "" || cvalue.value == "" || exdays.value == ""){
alert("Bạn chưa điền đầy đủ thông tin !");
return;
}else{
// lấy giá trị ở 3 textbox truyền vào hàm setCookie() để thêm
setCookie(cname.value, cvalue.value,exdays.value);
}
// đưa textbox về rỗng
cname.value = "";
cvalue.value = "";
exdays.value = "";
showAll();
}
function check(){
var NameCheck = document.getElementById("tbNameCheck").value;
// truyền vào hàm getCookie() tên cookie người dùng nhập
var NameCookie = getCookie(NameCheck);
if(NameCookie == "")
alert("Không có cookie tên là : " + NameCheck);
else
alert("cookie " + NameCheck + " có value là : " + NameCookie);
}
// hàm thêm mới cookie truyền vào Tên, Giá trị và số ngày
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
// hàm kiểm tra cookie truyền vào tên cookie
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
</script>
</body>
</html>
Ví dụ trên mình chú thích các hàm rồi, hi vọng giúp bạn hiểu hơn về cookie :)