HTML5: Web Storage

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

Giới thiệu

Ta hãy xét một tài khoản email, chẳng hạn như Gmail. Để đăng nhập vào tài khoản thư điện tử của bạn trong Gmail, thì bạn cần nhập địa chỉ email, sau đó là mật khẩu của bạn.

Sau khi đăng nhập được vào tài khoản, có thể ở góc trên bên phải màn hình của bạn sẽ hiện ra một hộp thoại như hình dưới đây để gợi ý lưu lại mật khẩu (password).

html5: lưu lại password

Như được thể hiện ở hình trên, nếu bạn nhấn nút Save password thì mật khẩu của gmail của bạn sẽ được lưu lại trong máy tính (thông qua cookie).

Theo truyền thống, trong vài thập kỷ qua, các ứng dụng web đã sử dụng cookie để lưu trữ một lượng nhỏ thông tin trên máy tính của người dùng. Cookie là một tập tin lưu trữ thông tin liên quan đến người dùng và việc lưu trữ có thể là tạm thời hoặc vĩnh viễn. Như vậy, trong trường hợp này, cookie có thể được tạo ra cho các chi tiết đăng nhập mà có thể được lưu trong một thời gian nhất định trên máy tính của người dùng.

Tuy nhiên, cookie có những hạn chế như sau:

- Cookie làm chậm hiệu suất của ứng dụng web, bởi chúng được đi kèm với mọi yêu cầu HTTP.

- Cookie không thể được coi là phương tiện an toàn để truyền dữ liệu nhạy cảm.

- Cookie không thể lưu trữ lượng thông tin lớn, vì chúng có một giới hạn kích thước chỉ có 4 KB.

Để khắc phục những hạn chế và đưa ra giải pháp để lưu trữ dữ liệu phía máy khách, W3C đã thiết kế một đặc điểm kỹ thuật có tên là API Lưu trữ web (Web Storage).

Lưu trữ web cung cấp chức năng sử dụng dữ liệu mà có thể được lưu trữ ở phía máy khách cho một phiên hoặc hơn.

Lưu trữ web trong HTML5

Lưu trữ web là một đặc điểm kỹ thuật W3C. Nó cung cấp chức năng để lưu trữ dữ liệu ở phía máy khách (là máy tính của người dùng). Dữ liệu này có thể phục vụ cho cả nhu cầu tạm thời cũng như vĩnh viễn. Một số trình duyệt còn tham chiếu đến nó như là 'Lưu trữ DOM'. Lợi thế của việc sử dụng Lưu trữ web là nó cung cấp nhiều kiểm soát hơn so với các cookie truyền thống, và rất dễ làm việc với nó.

Lưu trữ web lúc đầu là một phần của đặc điểm kỹ thuật HTML5, nhưng bây giờ nó hiện diện trong một đặc điểm kỹ thuật riêng biệt. Nó cho phép lưu trữ tối đa 5 MB thông tin cho mỗi tên miền (domain).

Các ứng dụng web HTML5 sử dụng Lưu trữ web để thực hiện lưu trữ liên tục phía máy khách.

Lưu trữ web so với cookie

Có một số khác biệt quan trọng giữa cookie và Lưu trữ web như sau:

- Cookie có nghĩa là để được đọc ở phía máy chủ, trong khi Lưu trữ web chỉ có sẵn ở phía máy khách. Máy chủ không thể đọc hoặc ghi trực tiếp vào Lưu trữ web.

- Cookie được gửi cùng với mỗi yêu cầu HTTP đến máy chủ, trong khi dữ liệu Lưu trữ web không được chuyển sang máy chủ.

- Cookie có thể dẫn đến tiêu tốn băng thông và do đó dẫn đến chi phí cao, bởi chúng được gửi đi với mỗi yêu cầu HTTP. Lưu trữ web được lưu trữ trên ổ cứng của người dùng, do đó không tốn kém gì khi sử dụng.

- Như đã đề cập ở trên, với các tập tin cookie, dữ liệu thông tin có thể được lưu trữ là 4 KB, trong khi với Lưu trữ web, một số lượng lớn các dữ liệu có thể được lưu trữ lên đến 5 MB.

Lưu trữ web cụ thể theo trình duyệt

Lưu trữ web là phụ thuộc vào trình duyệt. Nếu người dùng truy cập vào một trang web bằng trình duyệt Google Chrome chẳng hạn, thì bất kỳ dữ liệu nào cũng sẽ được lưu trữ vào Lưu trữ web của Google Chrome. Tương tự như vậy, nếu người dùng vào lại cũng trang web đó trong Firefox, thì dữ liệu đã lưu trước đó qua Google Chrome sẽ không dùng được. Vị trí nơi dữ liệu Lưu trữ web được lưu trữ phụ thuộc vào trình duyệt. Lưu trữ của mỗi trình duyệt là riêng biệt và độc lập, ngay cả khi nó có mặt trên cùng một máy tính.

Lưu trữ web HTML5 được thực hiện riêng trong hầu hết các trình duyệt web, và vì vậy người ta có thể sử dụng nó ngay cả khi các hỗ trợ (plug-in) cho trình duyệt của bên thứ ba không có sẵn.

Bảng dưới đây liệt kê sự hỗ trợ của các trình duyệt khác nhau cho Lưu trữ web HTML5.

Trình duyệt Phiên bản
IE 8.0+
Firefox 3.6+
Chrome 5.0+
Opera 10.5+
Safari 4.0+

Các loại Lưu trữ web

Có hai loại Lưu trữ web HTML5 cụ thể là lưu trữ phiên (sessionStorage) và lưu trữ cục bộ (localStorage). Cả lưu trữ phiên và lưu trữ cục bộ đều cho phép lưu trữ khoảng 5 MB dữ liệu cho mỗi tên miền. Trước khi đi vào chi tiết từng loại, bạn cần xác định xem phiên bản hiện tại của trình duyệt có hỗ trợ cho Lưu trữ web HTML5 hay không.

Để kiểm tra sự hỗ trợ của trình duyệt đối với Lưu trữ web HTML5, ta sử dụng thuộc tính có tên localStorage hoặc sessionStorage được dùng đến như là một biến toàn cầu (global) của đối tượng window. Nếu không có sự hỗ trợ, thuộc tính localStorage hoặc sessionStorage sẽ là không xác định.

Đoạn mã dưới đây trình bày kịch bản để kiểm tra sự hỗ trợ cho Lưu trữ web HTML5 của trình duyệt.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hỗ trợ Lưu trữ web</title>
<script>
function fcheckSupport() {
  if(('sessionStorage' in window) && window['sessionStorage'] !==null) {
    alert('Trình duyệt của bạn hỗ trợ Lưu trữ web');
    return;
  }
  alert('Trình duyệt của bạn không hỗ trợ Lưu trữ web');
}
</script>
</head>
<body onload='fcheckSupport();'>
</body>
</html>

Ở đoạn mã này, câu lệnh if kiểm tra xem thuộc tính có tên là sessionStorage tồn tại trong đối tượng window toàn cầu hay không. Nếu thuộc tính tồn tại, có nghĩa là lưu trữ phiên được hỗ trợ và có một thông báo thích hợp được hiển thị để cho biết như vậy.

Lưu trữ phiên (sessionStorage)

Lưu trữ phiên duy trì theo dõi dữ liệu cụ thể cho một cửa sổ hoặc tab và nó sẽ bị hủy bỏ ngay khi người dùng đóng tab (hoặc cửa sổ) trình duyệt tương ứng. Vì vậy, ngay cả khi bạn đang truy cập cùng một trang web trong hai cửa sổ hoặc tab khác nhau trên cùng một trình duyệt, thì mỗi cửa sổ sẽ có đối tượng lưu trữ phiên riêng lẻ của riêng mình. Điều này có nghĩa rằng mỗi cửa sổ chứa đối tượng lưu trữ phiên tách riêng với dữ liệu riêng biệt.

Lưu trữ phiên sử dụng các cặp khóa/giá trị. Các dữ liệu (giá trị) được lưu trữ vào khóa, và được truy xuất bằng cách tham chiếu tới khóa đó. Các cặp khóa/giá trị được đặt trong cặp nháy kép.

Khóa là một chuỗi, trong khi giá trị được lưu trữ trong khóa có thể là bất kỳ loại dữ liệu nào, chẳng hạn như string, boolean, integer, hoặc float. Không phụ thuộc vào loại dữ liệu được lưu trữ, dữ liệu khi lưu vào khóa luôn được đặt trong một chuỗi.

Do đó, nếu việc lưu trữ và truy xuất dữ liệu với các kiểu khác nhau thì ta cần sử dụng các hàm để chuyển đổi chúng thành những loại dữ liệu thích hợp.

Ví dụ như hàm parseInt() được sử dụng để chuyển đổi dữ liệu thành loại dữ liệu số nguyên trong JavaScript.

Bảng sau đây liệt kê một số ví dụ về các cặp khóa/giá trị thuộc các kiểu dữ liệu khác nhau.

Khóa Giá trị
Tên Long
Sách HTML5 và CSS3
Email dangtranlong@gmail.com
Ôtô Toyota Camry
Tuổi 27
Uservalid true

Có một số hoạt động có thể được thực hiện với đối tượng sessionStorage. Những hoạt động này được mô tả dưới đây.

- Lưu trữ và truy xuất dữ liệu

Các phương thức setItem() và getItem() được sử dụng tương ứng để lưu trữ và lấy dữ liệu từ lưu trữ phiên.

Cú pháp để sử dụng các phương thức setItem() và getItem() như sau:

+ Để gán dữ liệu thì ta sử dụng sessionStorage.setItem(key, value);, trong đó key là khóa có tên tham chiếu tới dữ liệu, value là dữ liệu được lưu trữ.

+ Để lấy dữ liệu ta sử dụng câu lệnh var item = sessionStorage.getItem(key);, trong đó item là biến để dữ liệu sẽ lưu lại vào đó, còn key là khóa có tên tham khảo tới dữ liệu.

Đoạn mã sau đây trình bày cách để gán và lấy tên sử dụng đối tượng sessionStorage.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Làm việc với Lưu trữ web</title>
<script>
function testStorage() {
  if(('sessionStorage' in window) && window['sessionStorage'] !== null) {
    sessionStorage.setItem('Tên', 'Long');
    alert('Tên là: ' + sessionStorage.getItem('Tên'));
  }
}
</script>
</head>
<body onload='testStorage();'>
</body>
</html>

Đoạn mã trên lưu hằng chuỗi 'Long' vào khóa 'Tên'. Điều này được thực hiện thông qua phương thức setItem(). Sau đó, hằng chuỗi được lấy ra và hiển thị như là một cảnh báo sử dụng phương thức alert() trên trang trình duyệt. Để lấy lại hằng chuỗi, phương thức getItem() đã được sử dụng trong đoạn mã.

Lưu ý: Bạn không nhất thiết phải sử dụng một chuỗi để đặt tên cho khóa. Bạn hoàn toàn có thể sử dụng một số để đặt tên cho khóa, mặc dù khi tiến hành lưu trữ thì nó sẽ được chuyển thành chuỗi.

Đoạn mã sau trình bày kịch bản có sử dụng số để đặt tên cho khóa.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Làm việc với Lưu trữ web</title>
<script>
function testStorage() {
  if(('sessionStorage' in window) && window['sessionStorage'] !== null) {
    sessionStorage.setItem(6, 'Cuốn sách rất tuyệt vời!');
    var feedback = sessionStorage.getItem(6);
    alert(feedback);
  }
}
</script></head>
<body onload='testStorage();'>
</body>
</html>

Trong đoạn mã này, khóa được đặt với tên là số 6, nhưng điều đó không có nghĩa đó là khóa thứ sáu. Tên của khóa được định nghĩa là 6 được lưu trữ nội bộ trong trình duyệt. Phương thức getItem() được sử dụng để lấy giá trị đã lưu với khóa đó. Cuối cùng, giá trị có khóa là 6 được hiển thị trong cửa sổ thông báo với hàm alert().

Tương tự như các đối tượng JavaScript khác, đối tượng sessionStorage có thể được coi là một mảng kết hợp. Thay vì sử dụng các phương thức getItem() và setItem(), ta có thể dùng một đoạn mã phụ của mảng có thể được sử dụng để lấy và gán dữ liệu. Ví dụ, sessionStorage.setItem('name','John'); có thể được viết thành sessionStorage['name'] ='John';.

Tương tự như vậy, alert(sessionStorage.getItem('name')); có thể được viết thành alert(sessionStorage['name']);.

Như đã đề cập ở trên, ta cũng có thể lưu trữ những giá trị không phải chuỗi vào trong lưu trữ phiên.

Đoạn mã sau trình bày việc lưu trữ một giá trị là số nguyên ứng với tuổi và sau đó được lấy ra bằng cách sử dụng phương thức parseInt() cùng với phương thức getItem().

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Session Storage</title>
<script>
function fstore() {
  if (('sessionStorage' in window) && window['sessionStorage']!== null) {
    var name = document.getElementById('ten').value;
    sessionStorage.setItem('username', name);
    var data = sessionStorage.getItem('username');
    sessionStorage.setItem('age', document.getElementById('tuoi').value);
    var agevalue = parseInt(sessionStorage.getItem('age'));
    alert(data + ' ' + agevalue + ' tuổi');
  }
}
</script>
</head>
<body>
<form name='form1'>
<label>Tên: </label><br>
<input type="text" id="ten">
<br />
<label>Tuổi: </label><br>
<input type="text" id="tuoi">
<br/><br>
<input type="submit" value="Gửi đi" onclick="fstore();"/>
</form>
</body>
</html>

Trong đoạn mã này, phương thức parseInt() chuyển đổi tham số đã chỉ ra thành một định dạng số nguyên.

Hình sau đây trình bày kết quả về lưu trữ và lấy dữ liệu biểu mẫu có các giá trị số nguyên.

- Loại bỏ và xóa dữ liệu

Ta cũng có thể loại bỏ và xóa dữ liệu từ lưu trữ phiên. Phương thức removeItem() được sử dụng để loại bỏ một mục cụ thể khỏi danh sách.

Cú pháp cho phương thức removeItem() như sau:

sessionStorage.removeItem(key);

, trong đó, key là khóa chứa dữ liệu.

Giả sử, để loại bỏ giá trị liên quan đến khóa username thì ta dùng câu lệnh như sau:

sessionStorage.removeItem('username');

Tương tự như vậy, để xóa tất cả các mục có trong lưu trữ phiên, ta sử dụng phương thức clear() như được trình bày sau đây:

sessionStorage.clear();

Ngoài ra, ta có thể sử dụng thuộc tính length để xác định số lượng các cặp khóa/giá trị hiện có trong lưu trữ:

var itemcount = sessionStorage.length;

Lưu trữ cục bộ (localStorage)

Không giống như lưu trữ phiên, lưu trữ cục bộ cho phép lưu dữ liệu từ trình duyệt trong thời gian dài hơn trên máy tính của người dùng. Dữ liệu được lưu giữ lâu dài và có thể được lấy ra khi người dùng truy cập lại website. Nói cách khác, lưu trữ cục bộ được sử dụng nếu dữ liệu cần phải được lưu trữ trong hơn một phiên đơn lẻ. Chẳng hạn như nếu bạn muốn đếm số lần một người đã viếng thăm một website thì bạn sẽ dùng loại lưu trữ này.

Về các phương thức, lưu trữ cục bộ làm việc theo một cách tương tự như lưu trữ phiên. Cụ thể, nó cũng sử dụng cùng các hàm chẳng hạn như setItem(), getItem(), removeItem() và clear().

Đoạn mã sau trình bày việc sử dụng lưu trữ cục bộ để lưu trữ giá trị của trường username và sau đó, lấy giá trị trong một trang web khác.

<!DOCTYPE html>
<head>
<title>Lưu trữ cục bộ</title>
<script>
function fstore() {
  if (('localStorage' in window) && window['localStorage'] !== null) {
    var username = document.getElementById('username').value;
    localStorage.setItem('username', username);
  }
  else {
    alert('Trình duyệt của bạn không hỗ trợ lưu trữ cục bộ');
  }
}
function fcancel_store() {
  if(('localStorage' in window) && window['localStorage'] !== null) {
    localStorage.removeItem('username');
  }
  else {
    alert('Trình duyệt của bạn không hỗ trợ lưu trữ cục bộ');
  }
}
</script>
</head>
<body>
<form method="get" action="success.html">
Tên đăng nhập: <input type="text" id="username" value="" size="20" onblur="fstore();"/>
<input type="submit" value="Gửi"/>
<input type="button" value="Hủy" onclick="fcancel_store();"/>
</body>
</html>

Trong đoạn mã trên, khi người dùng nhấn vào nút Gửi thì hàm fstore() sẽ được gọi, trước tiên nó sẽ tiến hành kiểm tra xem đối tượng localStorage có được trình duyệt hỗ trợ không. Nếu được hỗ trợ, khi đó các nội dung của phần Tên đăng nhập được lấy ra và lưu trữ trong biến có tên cũng là username. Sau đó, nội dung của biến này được gán cho đối tượng lưu trữ cục bộ với khóa có tên là username. Nếu đối tượng localStorage không được hỗ trợ, một thông điệp thích hợp được hiển thị trong cửa sổ thông báo.

Ngoài ra, hàm fcancel_store() được gọi ra khi người dùng bấm vào nút Hủy. Trong hàm fcancel_store(), phương thức removeItem() loại bỏ khóa đã chỉ định và giá trị của nó khỏi lưu trữ cục bộ.

Khi nút Gửi được nhấn, người dùng sẽ được chuyển hướng đến trang web success.html, hiển thị giá trị được lưu trữ với khóa username.

Đoạn mã sau trình bày trang success.html để lấy giá trị từ lưu trữ cục bộ và hiển thị nó trong trình duyệt.

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Lưu trữ cục bộ</title>
<script>
function fprint() {
  var username = localStorage.getItem('username');
  document.getElementById('lblMsg').innerHTML = 'Tên đăng nhập là: <b>'+ username+'</b>';
}
</script>
</head>
<body onload="fprint();">
<label id="lblMsg"></label><br>
</body>
</html>

Ở đây, trong đoạn mã, phương thức lưu trữ cục bộ getItem() lấy giá trị từ khóa username và lưu trữ vào biến username. Sau đó, giá trị của biến username được hiển thị trong thẻ <label>.

» Tiếp: API IndexedDB
« Trước: Kéo và thả (Drag and Drop)
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!