API lưu trữ web trong HTML - HTML Web Storage API

  • Huân

    Tác giả

    Huân

  • Ngày đăng

    30 thg 11, 2023

  • Số lượt xem

    281 lượt xem


Bài học này mô tả HTML Web Storage API cung cấp cách lưu trữ dữ liệu người dùng trên trình duyệt. Đơn giản và hiệu quả, nó giữ thông tin ngay cả sau khi trang web đã tắt

HTML Web Storage là gì?

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

Trước HTML5, dữ liệu ứng dụng phải được lưu trữ trong cookies, được bao gồm trong mỗi yêu cầu của máy chủ. Web storage an toàn hơn và có thể lưu trữ lượng lớn dữ liệu cục bộ mà không ảnh hưởng đến hiệu suất của trang web.

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

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

Hỗ trợ trình duyệt

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ Web Storage.

API

Chrome

Edge

FireFox

Safari

Opera

Web Storage

4.0

8.0

3.5

4.0

11.5

Đối tượng HTML Web Storage

HTML web storage cung cấp hai đối tượng để lưu trữ dữ liệu trên máy khách:

window.localStorage lưu trữ dữ liệu mà 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 sẽ mất khi tab trình duyệt được đóng)

Trước khi sử dụng web storage, kiểm tra hỗ trợ trình duyệt cho localStorage và sessionStorage:

if (typeof(Storage) !== "undefined") {
      // Code cho localStorage/sessionStorage.
} else {
      // Xin lỗi! Không hỗ trợ Web Storage.
}

Đối tượng localStorage

Đố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 được đóng và sẽ có sẵn vào ngày tiếp theo, tuần tiếp theo hoặc năm tiếp theo.

Ví dụ:

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

Giải thích ví dụ:

Tạo một cặp tên/giá trị localStorage với tên="lastname" và giá trị="Smith"

Lấy ra giá trị của "lastname" và chèn nó vào phần tử với id="result"

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

// Lưu trữ
localStorage.lastname = "Smith";
// Lấy ra
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 tên/giá trị luôn được lưu trữ dưới dạng chuỗi. Nhớ chuyển đổi chúng sang định dạng khác khi cần thiết!

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

if (localStorage.clickcount) {
      localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
      localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "Bạn đã nhấp vào nút " + localStorage.clickcount + " lần.";

Đối tượng sessionStorage

Đối tượng sessionStorage 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 sẽ bị xóa khi người dùng đóng tab trình duyệt cụ thể.

Ví dụ:

if (sessionStorage.clickcount) {
      sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
      sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "Bạn đã nhấp vào nút " + sessionStorage.clickcount + " lần trong phiên này.";

Tổng số đánh giá: 1

Xếp hạng: 5.0 / 5 sao

Danh sách bài học về HTML

Liên Kết Chia Sẻ

Đây là liên kết chia sẻ bới cộng đồng người dùng, chúng tôi không chịu trách nhiệm gì về nội dung của các thông tin này. Nếu có liên kết nào không phù hợp xin hãy báo cho admin.