Bài 9: History và Cookie trong Javascript

0

Bài học trước, chúng ta đã tìm hiểu về hai thành phần đầu tiên của BOM là window và location. Trong bài này, chúng ta sẽ tìm hiểu về history và cookie trong Javascript.

History – Lịch sử duyệt web

Một số thao tác với history phổ biến là

+ Đếm số trang đã truy cập bằng thuộc tính length

var a = window.history.length
console.log(a)

+ Lùi lại một trang bằng câu lệnh

window.history.back()

Lưu ý: để có thể lùi lại 1 trang thì trước đó chúng ta phải click vào liên kết và chuyển tới trang hiện tại. Giải thích hơi khó hiểu, các bạn có thể tải code ma64ui cuối bài viết và chạy thử

+ Tiến đến một trang liên kết vừa lùi.

window.history.forward()

Cách sử dụng tương tự như back()

Cookie – Dữ liệu duyệt web lưu cục bộ trên trình duyệt

Cookie là gì?

Cookie là dữ liệu được lưu trữ trong một file text và nằm trong máy tính nên việc lưu trữ Cookie sẽ là vĩnh viễn hoặc là một thời gian cụ thể do bạn thiết lập.

+ Tạo cookie: để tạo cookie, chúng ta dùng câu lệnh:

document.cookie = 'domain=goclamweb.com"

+ Lấy giá trị cookie: để truy xuất và lấy giá trị

var a = document.cookie

+ Đổi giá trị cho cookie: để đổi giá trị cho cookie, các bạn gán lại giá trị khác cho cookie như cách tạo cookie

+ Xóa cookie: để xóa cookie, bạn chỉ việc đặt thời gian sống cho cookie thông qua giá trị expires

Hàm xử lý cookie

Cookie trả về khi chúng ta lấy giá trị là một chuỗi string có quy luật theo dạng key=value. Để tách từng cookie riêng biệt chúng ta dùng 2 hàm set và get cookie như sau: (lấy từ trang Javascript cookie w3school)

+ Hàm setCookie

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 getCookie

function getCookie(cname) {
   var name = cname + "=";
   var decodedCookie = decodeURIComponent(document.cookie);
   var ca = decodedCookie.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 "";
}

Truyền vào tên của cookie

+ Hàm kiểm tra cookie

function checkCookie() {
   var username = getCookie("username");
   if (username != "") {
      alert("Welcome again " + username);
   } else {
      username = prompt("Please enter your name:", "");
      if (username != "" && username != null) {
         setCookie("username", username, 365);
      }
   }
}

Nếu có thắc mắc, hãy đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.

Liên h

Để lại một trả lời

Địa chỉ email của bạn sẽ không được công bố.