Thứ Tư, 12 tháng 2, 2014

JavaScript Cookies

Cookie cho phép bạn lưu trữ thông tin người sử dụng trong các trang web.

Cookies là gì?

Cookies là dữ liệu, lưu trữ trong các tập tin văn bản nhỏ, trên máy tính của bạn.

Khi một máy chủ web đã gửi một trang web đến một trình duyệt, kết nối được đóng cửa, và các máy chủ quên tất cả mọi thứ về người dùng.

Cookie đã được phát minh để giải quyết vấn đề "làm thế nào để ghi nhớ thông tin về người sử dụng":
  • Khi người dùng truy cập một trang web, tên của ông có thể được lưu trữ trong một cookie.
  • Thời gian tiếp theo người dùng truy cập trang web, cookie "nhớ" tên của mình.
Cookie sẽ được lưu trong các cặp tên-giá trị như:

username=John Doe

Khi một yêu cầu trình duyệt một trang web từ một máy chủ, cookies thuộc trang được thêm vào 
theo yêu cầu. Bằng cách này, máy chủ được các dữ liệu cần thiết để "nhớ" thông tin về người sử dụng.

Tạo ra một Cookie với JavaScript

JavaScript có thể tạo ra các cookie, đọc cookie và xóa các tập tin cookie với các tài sản document.cookie .

Với JavaScript, cookie có thể được tạo ra như thế này:

document.cookie="username=John Doe";

Bạn cũng có thể thêm một hạn sử dụng (UTC hoặc giờ GMT thời gian). Theo mặc định, các tập tin cookie sẽ bị xóa khi trình duyệt được đóng lại:

document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT";

Với một tham số đường dẫn, bạn có thể cho trình duyệt những gì con đường cookie thuộc về. Theo mặc định, các tập tin cookie thuộc về trang hiện tại.

document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

Đọc một Cookie với JavaScript

Với JavaScript, cookie có thể được đọc như thế này:

var x = document.cookie;

Ghidocument.cookie sẽ trở lại tất cả các cookie trong một chuỗi giống như: cookie1 = giá trị; cookie2 = giá trị; cookie3 = giá trị;

Thay đổi một Cookie với JavaScript

Với JavaScript, bạn có thể thay đổi một cookie theo cùng một cách như bạn tạo ra nó:

document.cookie="username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

Cookie cũ được ghi đè.

Xóa một Cookie với JavaScript

Xóa một cookie là rất đơn giản. Chỉ cần thiết lập các tham số hết hạn vào một ngày trôi qua:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

Lưu ý rằng bạn không cần phải chỉ định một giá trị cookie khi bạn xóa một tập tin cookie.

Cookie dây

Tài sản document.cookie trông giống như một chuỗi văn bản bình thường. Nhưng nó không.

Ngay cả khi bạn viết một chuỗi toàn bộ cookie document.cookie, khi bạn đọc nó ra một lần nữa, bạn chỉ có thể xem các cặp tên-giá trị của nó.

Nếu bạn đặt một cookie mới, cookies cũ không ghi đè. Cookie mới được thêm vào document.cookie, vì vậy nếu bạn đọc document.cookie một lần nữa bạn sẽ nhận được một cái gì đó như:

cookie1 = giá trị; cookie2 = giá trị;
       

Nếu bạn muốn tìm giá trị của một cookie sẽ được chỉ định, bạn phải viết một hàm JavaScript để tìm kiếm cho các giá trị cookie trong chuỗi cookie.

JavaScript Cookie Ví dụ

Trong ví dụ để làm theo, chúng ta sẽ tạo ra một cookie để lưu tên của một khách truy cập.

Lần đầu tiên một người truy cập đến trang web, ông sẽ được yêu cầu điền vào tên của mình. Tên này sau đó được lưu trữ trong một cookie.

Trong thời gian tới khách truy cập đến trang đó, ông sẽ nhận được một thông điệp chào mừng.
Ví dụ, chúng ta sẽ tạo ra 3 chức năng JavaScript:
  1. Một chức năng để thiết lập một giá trị cookie
  2. Một chức năng để có được một giá trị cookie
  3. Một chức năng để kiểm tra một giá trị cookie

Một chức năng để thiết lập một Cookie

Đầu tiên, chúng ta tạo ra một chức năng mà các cửa hàng tên của khách truy cập trong một biến cookie:

function setCookie(cname,cvalue,exdays)
{
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}

Ví dụ giải thích:

Các thông số của hàm trên là tên của các tập tin cookie (CNAME), giá trị của cookie (cvalue), và số ngày cho đến khi các tập tin cookie nên hết hạn (exdays).

Chức năng đặt một cookie bằng cách cộng các cookiename, giá trị cookie, và hết hạn chuỗi.

Một chức năng để có được một Cookie

Sau đó, chúng tôi tạo ra một chức năng mà trả về giá trị của một cookie quy định:

function getCookie(cname)
{
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++)
  {
  var c = ca[i].trim();
  if (c.indexOf(name)==0) return c.substring(name.length,c.length);
  }
return "";
}

Chức năng giải thích:

Lấy cookiename như tham số (CNAME).

Tạo ra một biến (tên) với các văn bản để tìm kiếm (CNAME + "=").

Chia document.cookie trên dấu chấm phẩy vào một mảng được gọi là ca (ca = document.cookie.split (';')).

Vòng lặp thông qua các ca mảng (i = 0; i <ca.length; i + +), và đọc mỗi giá trị cắt (c = ca [i] trim ().).

Nếu cookie được tìm thấy (c.indexOf (tên) == 0), trả về giá trị của cookie (c.substring (name.length, c.length).

Nếu cookie không tìm thấy, trở về "".

Một chức năng để kiểm tra một Cookie

Cuối cùng, chúng tôi tạo ra các chức năng để kiểm tra nếu một cookie được thiết lập.
Nếu cookie được thiết lập nó sẽ hiển thị một lời chào.

Nếu cookie không được thiết lập, nó sẽ hiển thị một hộp nhắc, yêu cầu tên của người sử dụng, và lưu trữ các tập tin cookie tên người dùng cho 365 ngày, bằng cách gọi hàm setCookie:

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);
    }
  }
}

Tất cả cùng nhau Bây giờ

Ví dụ

<!DOCTYPE html>
<html>
<head><script>

function setCookie(cname,cvalue,exdays)
{
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname+"="+cvalue+"; "+expires;
}

function getCookie(cname)
{
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) 
  {
  var c = ca[i].trim();
  if (c.indexOf(name)==0) return c.substring(name.length,c.length);
  }
return "";
}

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

</script></head>

<body onload="checkCookie()"></body>
</html>


Thử nó cho mình »
Ví dụ trên chạy checkCookie () chức năng khi tải trang.
Người đăng: vào lúc
Nhãn: ,
Các tin khác

Không có nhận xét nào:

Đăng nhận xét

Đăng ký: Đăng Nhận xét (Atom)