Bài 45: Lưu trữ dữ liệu cục bộ trong HTML5

Lưu trữ dữ liệu trực tiếp trên HTML5 (trên trình duyệt) được đánh giá là tốt hơn so với việc lưu trữ dữ liệu trên cookies.

Lưu trữ dữ liệu cục bộ (local storage) là gì?

Với việc sử dụng local storage (hay còn gọi là lưu trữ cục bộ), ứng dụng web có thể lưu trữ dữ liệu trực tiếp trên trình duyệt của người dùng.

Trước khi HTML5 ra đời, dữ liệu web được lưu trữ vào cookie và những dữ liệu này đều được gửi kèm mỗi khi trình duyệt gửi yêu cầu tới máy chủ. Local Storage an toàn hơn cookie và có thể lưu trữ khối lượng dữ liệu lớn mà không làm ảnh hưởng tới hiệu năng của website.

Không giống cookies, Local Storage có giới hạn lưu trữ lớn hơn rất nhiều (ít nhất là 5MB) và những dữ liệu này không cần phải gửi tới máy chủ trong quá trình trao đổi dữ liệu giữa trình duyệt với máy chủ.

Tất cả các trang từ cùng một nguồn (cùng tên miền và giao thức), có thể lưu trữ và truy cập vào cùng một khu vực dữ liệu.

Trình duyệt hỗ trợ

Dưới đây là bảng danh sách một  số phiên bản đầu tiên của trình duyệt hỗ trợ đầy đủ cho Local Storage.

API icon_chrome icon_ie icon_firefox icon_safari icon_opera
Lưu trữ trên Web 4.0 8.0 3.5 4.0 11.5

Các kiểu lưu trữ Local Storage trong HTML

Local storage cung cấp 2 kiểu lưu trữ dữ liệu trên máy người dùng:

  • window.localStorage – Lưu trữ dữ liệu không giới hạn thời gian
  • window.sessionStorage – Lưu trữ dữ liệu trong một phiên làm việc (dữ liệu sẽ bị xóa khi người dùng đóng cửa sổ trình duyệt)

Trước khi sử dụng local storage, bạn nên kiểm tra trình duyệt của người dùng có hỗ trợ localStorage và sessionStorage hay không:


if (typeof(Storage) !== "undefined") {
// Code cho localStorage/sessionStorage.
} else {
// Xin lỗi! Trình duyệt web không hỗ trợ Storage support.
}

Kiểu lưu trữ localStorage

LocalStorage là kiểu lưu trữ được sử dụng để chứa những dữ liệu không giới hạn thời gian. Những dữ liệu này sẽ không bị xóa khi người dùng đóng cửa sổ trình duyệt.

Ví dụ:


<!DOCTYPE html>
<html>
<body>

<div id="result"></div>

<script>
// Kiểm tra trình duyệt hỗ trợ
if (typeof(Storage) !== "undefined") {
// Lưu trữ
localStorage.setItem("wesite", "timoday.edu.vn");
// Lấy lại thông tin rồi hiển thị
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
} else {
document.getElementById("result").innerHTML = "Xin lỗi, trình duyệt web của bạn không hỗ trợ storage..."; 
} 
</script> 
</body> 
</html>

Giải thích ví dụ:

  • Tạo một localStorage với tên là “website” và giá trị là “timoday.edu.vn”
  • Lấy giá trị của localStorage có tên là “website” và hiển thị lên thẻ div có id=”result”

Ví dụ trên có thể được viết theo cách khác như sau:


//Lưu trữ dữ liệu
localStorage.wesite = "timoday.edu.vn";
//Lấy lại dữ liệu
document.getElementById("result").innerHTML = localStorage.website;

Câu lệnh sau xóa item “website” trong localStorage:

localStorage.removeItem("website");

Chú ý:

Tên và giá trị đều được lưu dưới dạng chuỗi ký tự. Bạn nhớ chuyển đổi chúng nếu sử dụng sử dụng ở định dạng khác

Ví dụ dưới đây dùng để đếm số lần mà người dùng đã nhấn vào nút. Lúc này, giá trị lưu trữ cần phải được chuyển đổi sang kiểu số trước khi sử dụng:

Ví dụ:


<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter() {
if(typeof(Storage) !== "undefined") {
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount)+1;
} else {
localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "Bạn đã nhấn vào nút trên " + localStorage.clickcount + " lần(s).";
} else {
document.getElementById("result").innerHTML = "Xin lỗi, trình duyệt web của bạn không hỗ trợ storage...";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Kích đây!</button></p>
<div id="result"></div>
<p>Nhấn vào nút bên trên để thấy số lần truy cập của bạn.</p>
<p>Đóng cửa sổ trình duyệt, và thao tác lại, Bạn sẽ thấy số lần nhấp vào nút sẽ được tiếp tục tăng thay vì đếm lại từ đầu.</p>
</body>
</html>

Kiểu lưu trữ sessionStorage

Kiểu lưu trữ sessionStorage hoạt động giống như kiểu lưu trữ localStorage ngoại trừ việc nó chỉ lưu trữ dữ liệu trên một phiên làm việc. Dữ liệu sẽ bị xóa khi người dùng đóng cửa sổ trình duyệt.

Ví dụ dưới đây cũng sử dụng để đếm số lần người dùng đã nhấn vào nút, nhưng kết quả chỉ lưu trong phiên làm việc hiện tại:

Ví dụ:


<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter() {
if(typeof(Storage) !== "undefined") {
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
} else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "Bạn đã nhấn vào nút trên  " + sessionStorage.clickcount + " time(s) in this session.";
} else {
document.getElementById("result").innerHTML = "Xin lỗi, trình duyệt web của bạn không hỗ trợ storage...";
 } 
} 
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Kích đây!</button></p> 
<div id="result"></div>
<p>Đóng cửa sổ trình duyệt, và thao tác lại, Bạn sẽ thấy số lần nhấp vào nút trong phiên làm việc trước đã bị xóa đi.
</p>
</body> 
</html>

Các thẻ:

Có thể bạn sẽ thích…

Để lại một bình luận