Thao tác với Cookie trong JavaScript (document.cookie) | Laptrinhcanban.com

Thao tác với Cookie trong JavaScript (document.cookie)

Cùng tìm hiểu về Cookie trong JavaScript. Bạn sẽ biết Cookie trong JavaScript là gì cũng như các cách thao tác với Cookie trong JavaScript sau bài học này.

Cookie trong JavaScript hay còn gọi là Cookie HTTP, cookie web, cookie trình duyệt là một phần dữ liệu nhỏ được lưu trữ tại trình duyệt web của người dùng. Cookie có thể được máy chủ gửi đến trình duyệt và lưu giũ tại trình duyệt, và ngược lại thì trình duyệt cũng có thể gửi lại cookie đã lưu thông tin tới máy chủ.

Cookie được sử dụng chủ yếu để lưu thông tin của người dùng, ví dụ như tên, ip hoặc thời gian truy cập chẳng hạn.

Để thao tác và làm việc với Cookie trong JavaScript, chúng ta cần sửu dụng tới thuộc tính cookie của window.document Object như sau:

document.cookie

Cookie trong JavaScript được lưu giữ dưới định dạng một cặp tên kèm giá trị 'NAME=VALUE'. Chúng ta có thể tạo một Cookie và ghi nó vào trong document.cookie trong JavaScript với cú pháp sau đây:

document.cookie = 'name=value

Trong đó namevalue là tên và giá trị tương ứng của cookie được tạo.

Ví dụ cụ thể:

document.cookie = "username=kiyoshi";

Lại nữa, chúng ta cũng có thể lưu đồng loạt nhiều cookie vào trong document.cookie, với các cookie (các cặp name-value) cách nhau bởi dấu chấm phẩy như sau:

document.cookie = 'name1=value1; name2=value2; ...'

Ví dụ:

document.cookie = "username=kiyoshi; old=31";

Tất nhiên chúng ta cũng có thể ghi lần lượt từng cookie vào document.cookie như sau:

document.cookie = "username=kiyoshi";
document.cookie = "old=31";

Bạn cũng có thể sử dụng biến để tạo cookie như sau:

let myname = 'kiyoshi';
document.cookie = 'name=' + myname;

Lưu ý nếu giá trị của name hoặc value chứa dấu :, dấu ,, dấu cách hoặc ký tự tiếng Nhật, thì cần phải dùng các phương thức như encodeURI và encodeURIComponent với chúng trước khi ghi vào trong cookie.

document.cookie = "onakaga=" + encodeURIComponent('へった');  
// "onakaga=%E3%81%B8%E3%81%A3%E3%81%9F"
document.cookie = "dokkoisho=" + encodeURI('よっこらせ');
// "dokkoisho=%E3%82%88%E3%81%A3%E3%81%93%E3%82%89%E3%81%9B"

Cuối cùng, ngoài tên và giá trị thì bạn cũng có thể chỉ định thêm nhiều thuộc tính khác cho cookie, ví dụ như thêm cả thời gian hết hạn cho một cookie với thuộc tính expires chẳng hạn:

document.cookie = "username=kiyoshi; expires=Mon, 27 Dec 2022 19:00:00 UTC;";

Hướng dẫn cụ thể đã được Kiyoshi chia sẻ trong bài dưới đây:

Để đọc toàn bộ các Cookie trong JavaScript, chúng ta tham chiếu trực tiếp đến document.cookie như sau:

document.cookie

Khi đó, toàn bộ các cookie được liên kết với trang web đang mở sẽ được lấy.

Ví dụ cụ thể, chúng ta có thể in toàn bộ các cookie ra màn hình console với mã lệnh sau:

console.log(document.cookie);

Chúng ta cũng có thể gán document.cookie vào một biến và sử dụng trong chương trình như sau:

var x = document.cookie;
console.log(x);

Khi tham chiếu trực tiếp đến document.cookie, toàn bộ các cookie (các cặp name-value) liên kết với trang web hiện tại sẽ được lấy ra.

Tuy nhiên thì chúng ta cũng có thể lấy ra một cookie với tên cụ thể từ trong các cookie đó, với mã lệnh sau đây:

let cookies = document.cookie; //Lấy toàn bộ cookie
let cookiesArray = cookies.split(';'); // Phân tách các cookie bởi dấu chấm phẩy
let take_name = 'address'; // Chỉ định tên của cookie cần lấy

for(var c of cookiesArray){
var cArray = c.split('='); //Phân tác các cặp name value bởi dấu bằng
if( cArray[0] == take_name){ //Lấy ra cookie có name chỉ định
console.log(cArray); // [key,value]
}
}

Chúng ta cũng có thể sử dụng đến biểu thức chính quy để làm việc này.

var cookies = document.cookie;
var cookiesArray = cookies.split(';');

for(var c of cookiesArray){
var cArray = c.split('=');

var pattern = /\_/; // pattern của Biểu thức chính quy
if( cArray[0].match(pattern) ){ // Lấy các cookie phù hợp với pattern
console.log(cArray);
}
}

Để thay đổi Cookie trong JavaScript, chúng ta đơn giản ghi đè nội dung cookie mới có cùng tên vào document.cookie là xong.

document.cookie = 'name = new_value';

Trong đó name là tên của cookie cần thay đổi giá trị và new_value là giá trị mới của nó.

Ví dụ, chúng ta có thể tạo một cookie có tên là username rồi thay thế giá trị ban đầu của nó như sau:

document.cookie = "username=kiyoshi"; 
document.cookie = "username=suzuki";

Khi đó cookie có username=kiyoshi sẽ chuyển thành username=kiyoshi và lưu lại vào trong document.cookie.

Để xoá Cookie trong JavaScript, chúng ta cần thiết lập thời gian hết hạn của nó (bằng thuộc tính Expires) bằng một mốc thời gian trong quá khứ, hoặc là thiết lập thời gian tồn tại của nó (bằng thuộc tính Max-Age) bằng 0.

Ví dụ, nếu thời gian hiện tại là Mon, 06 Jan 2022 18:11:30 GMT thì chúng ta có thể xoá một cookie bằng một mốc thời gian trước thời gian này như sau:

document.cookie = 'username=kiyoshi; Expires=Mon, 06 Jan 2000 18:11:30 GMT';
document.cookie = 'username=kiyoshi; Max-Age=0';

Để xoá toàn bộ Cookie trong JavaScript, chúng ta cần xoá từng cookie đã thiết lập bằng một trong hai phương pháp mà Kiyoshi đã giới thiệu ở trên.

Để làm được điều đó, chúng ta cần dùng vòng lặp để truy cập và thiết lập cho từng cookie với mã lệnh sau:

let cookies = document.cookie;
let cookiesArray = cookies.split(';');
let now = new Date();
now.setYear(now.getYear() - 1);
for(let c of cookiesArray){
let cArray = c.split('=');
document.cookie = cArray[0] + '=;max-age=0'
document.cookie = cArray[0] + '=;expires=' + now.toGMTString();
}

Mã mẫu

Sau đây hãy cũng xem demo về Cookie trong JavaScript bằng mã HTML sau đây:

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>

<h1>Sample</h1>

<p id="msg">Ví dụ thao tác với Cookie bằng JavaScript</p>

<input type="button" value="view cookie" id="view">
<input type="button" value="delete cookie" id="delete">

<script>

let view_cookie = document.getElementById('view');
view_cookie.addEventListener('click', function(){
let name = encodeURIComponent('Kiyoshi');
document.cookie = 'username=' + name;
document.cookie = 'old=31';
document.cookie = 'address=Tokyo';

console.log(document.cookie);
});

let delete_cookie = document.getElementById('delete');
delete_cookie.addEventListener('click', function(){
let cookies = document.cookie;
let cookiesArray = cookies.split(';');
let now = new Date();
now.setYear(now.getYear() - 1);
for(let c of cookiesArray){
let cArray = c.split('=');
document.cookie = cArray[0] + '=;max-age=0'
document.cookie = cArray[0] + '=;expires=' + now.toGMTString();
}
console.log(document.cookie);
});

</script>

</body>
</html>

Với mã HTML này, khi click vào nút view thì các cookie sẽ được tạo ra và ghi vào document.cookie như sau:

Cookie trong JavaScript

Sau đó khi khi click vào nút delete thì toàn bộ các cookie có trong trang web hiện tại sẽ bị xoá đi:
Cookie trong JavaScript

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn về Cookie trong JavaScript rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.

Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.

Hãy chia sẻ và cùng lan tỏa kiến thức lập trình Nhật Bản tại Việt Nam!

HOME>> >>

Profile
きよしです!笑

Tác giả : Kiyoshi (Chis Thanh)

Kiyoshi là một cựu du học sinh tại Nhật Bản. Sau khi tốt nghiệp đại học Toyama năm 2017, Kiyoshi hiện đang làm BrSE tại Tokyo, Nhật Bản.