html api lưu trữ web

Lưu trữ Web HTML là gì?


Với tính năng lưu trữ dữ liệu trên web, các ứng dụng website có thể lưu trữ dữ liệu cục bộ trong trình duyệt của người dùng.

Trước HTML5, dữ liệu ứng dụng thường được lưu trữ trong biến cookie, và được gọi lại khi máy chủ web có yêu cầu. Lưu trữ web thì an toàn hơn và có thể lưu trữ một lượng lớn dữ liệu được lưu trữ cục bộ mà không ảnh hưởng đến hiệu suất trang web.

Không giống như cookie, giới hạn lưu trữ web lớn hơn nhiều (ít nhất 5MB) và thông tin dữ liệu người dùng không bao giờ được chuyển đến máy chủ.

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

Trình duyệt hỗ trợ


Các số trong bảng bên dưới chỉ định phiên bản tối thiểu trình duyệt hỗ trợ đầy đủ cho chức năng webstorage.

API          
Lưu trữ web 4.0 8.0 3.5 4.0 11.5

Đối tượng lưu trữ web HTML


HTML cung cấp cho chúng ta hai đối tượng để lưu trữ dữ liệu trên máy khách client.

  • window.localStorage - lưu trữ dữ liệu không có ngày hết hạn
  • window.sessionStorage - lưu trữ dữ liệu cho một phiên (dữ liệu bị mất khi đóng tab trình duyệt)

Trước khi sử dụng lưu trữ web, chúng ta phải kiểm tra sự hỗ trợ của trình duyệt cho localStoragesessionStorage.

if (typeof(Storage) !== "undefined") {
  // Code cho localStorage/sessionStorage.
} else {
  // Sorry! No Web Storage support..
}

Đối tượng lưu trữ cục bộ


Đối tượng localStorage lưu trữ dữ liệu mà không có ngày hết hạn. Dữ liệu sẽ không bị xóa khi trình duyệt bị đóng và sẽ có sẵn vào ngày, tuần hoặc năm tiếp theo.

Ví dụ

  // Lưu trữ
  localStorage.setItem("lastname", "Smith");
  // Lấy lại
  document.getElementById("result").innerHTML = localStorage.getItem("lastname");

Xem kết quả

Ví dụ được giải thích như sau:

  • Tạo một cặp name/value cho phương thức lưu trữ localStorage với name="lastname"value="Smith"
  • Lấy value của "lastname" và chèn nó vào phần tử có id="result"

Ví dụ trên cũng có thể được viết như thế này:

// Lưu trữ
localStorage.lastname = "Smith";
// Lấy lại
document.getElementById("result").innerHTML = localStorage.lastname;

Cú pháp để xóa mục localStorage "lastname" như sau:

localStorage.removeItem("lastname");
Lưu ý: Các cặp name / value luôn được lưu trữ dưới dạng chuỗi. Hãy nhớ chuyển đổi chúng sang định dạng khác khi cần thiết!

Ví dụ sau đây đếm số lần người dùng đã nhấp vào một button. Trong đoạn mã này, chuỗi giá trị được chuyển đổi thành một số để có thể tăng bộ đếm.

Ví dụ

<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 đã Click vào button " + 
localStorage.clickcount + " lần.";
  } else {
    document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
  }
}
</script>

Xem kết quả

Đối tượng sessionStorage


Đối tượng sessionStorage này có chức năng tương đương với đối tượng localStorage, ngoại trừ việc nó lưu trữ dữ liệu chỉ cho một phiên. Dữ liệu bị xóa khi người dùng đóng tab trình duyệt cụ thể.

Ví dụ sau đếm số lần người dùng đã nhấp vào button, trong phiên hiện tại.

Ví dụ

<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 đã Click vào button " + 
sessionStorage.clickcount + " lần.";
  } else {
    document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
  }
}
</script>

Xem kết quả