• Trang chủ
• Hướng dẫn HTML
• HTML5 Web Storage

HTML5 Web Storage

Trong hướng dẫn này, bạn sẽ học cách sử dụng tính năng web storage - lưu trữ web HTML5 để lưu trữ dữ liệu trên trình duyệt của người dùng.

Web Storage (Lưu trữ Web) là gì?

Tính năng lưu trữ web của HTML5 cho phép bạn lưu trữ cục bộ một số thông tin trên máy tính của người dùng, tương tự như cookie, nhưng nhanh hơn và tốt hơn nhiều so với cookie. Tuy nhiên, lưu trữ web không an toàn hơn cookie. Vui lòng xem hướng dẫn về cookie PHP để tìm hiểu thêm về cookie.

Thông tin được lưu trữ trong bộ lưu trữ web không được gửi đến máy chủ web trái ngược với các cookie nơi dữ liệu được gửi đến máy chủ với mọi yêu cầu. Ngoài ra, nơi cookie cho phép bạn lưu trữ một lượng nhỏ dữ liệu (gần 4KB), bộ lưu trữ web cho phép bạn lưu trữ tối đa 5MB dữ liệu.

Có hai loại lưu trữ web, khác nhau về phạm vi và thời gian tồn tại:

• Bộ nhớ cục bộ - Bộ nhớ cục bộ sử dụng đối tượng localStorage để lưu trữ dữ liệu cho toàn bộ trang web của bạn trên cơ sở vĩnh viễn . Điều đó có nghĩa là dữ liệu cục bộ được lưu trữ sẽ có sẵn vào ngày hôm sau, tuần sau hoặc năm sau trừ khi bạn xóa nó.
• Lưu trữ phiên - Lưu trữ phiên sử dụng đối tượng sessionStorage để lưu trữ dữ liệu trên cơ sở tạm thời , cho một cửa sổ hoặc tab trình duyệt. Dữ liệu biến mất khi phiên kết thúc tức là khi người dùng đóng cửa sổ hoặc tab trình duyệt đó.

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

Như đã nêu trước đó, đối tượng localStorage lưu trữ dữ liệu mà không có ngày hết hạn. Mỗi phần dữ liệu được lưu trữ trong một cặp khóa / giá trị. Khóa xác định tên của thông tin (như 'first_name') và giá trị là giá trị được liên kết với khóa đó (giả sử 'Peter'). Đây là một ví dụ:

<script>
// Check if the localStorage object exists
if(localStorage) {
    // Store data
    localStorage.setItem("first_name", "Peter");
    
    // Retrieve data
    alert("Hi, " + localStorage.getItem("first_name"));
} else {
    alert("Sorry, your browser do not support local storage.");
}
</script>

Giải thích ví dụ:

Đoạn mã JavaScript trên có ý nghĩa sau:

• localStorage.setItem (khóa, giá trị) lưu trữ giá trị được liên kết với một khóa.
• localStorage.getItem (key) truy xuất giá trị được liên kết với khóa.

Bạn cũng có thể xóa một mục cụ thể khỏi bộ nhớ nếu nó tồn tại, bằng cách chuyển tên khóa cho phương thức removeItem(), chẳng hạn như localStorage.removeItem("first_name").

Tuy nhiên, nếu bạn muốn xóa toàn bộ bộ nhớ, hãy sử dụng phương thức clear(), chẳng hạn như localStorage.clear(). Phương thức clear() này không cần đối số và chỉ xóa tất cả các cặp khóa / giá trị khỏi localStorage cùng một lúc, vì vậy hãy suy nghĩ kỹ trước khi sử dụng nó.

Đối tượng sessionStorage

Đối tượng sessionStorage hoạt động theo cách tương tự localStorage, ngoại trừ việc nó lưu trữ dữ liệu chỉ trong một phiên tức là dữ liệu vẫn còn cho đến khi người dùng đóng cửa sổ hoặc tab đó.

Hãy thử ví dụ sau để hiểu về cơ bản nó hoạt động như thế nào:

<script>
// Check if the sessionStorage object exists
if(sessionStorage) {
    // Store data
    sessionStorage.setItem("last_name", "Parker");
    
    // Retrieve data
    alert("Hi, " + localStorage.getItem("first_name") + " " + sessionStorage.getItem("last_name"));
} else {
    alert("Sorry, your browser do not support session storage.");
}
</script>