Storage
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Giao diện Storage của Web Storage API cung cấp quyền truy cập vào session storage hoặc local storage của một miền cụ thể. Ví dụ, nó cho phép thêm, sửa đổi hoặc xóa các mục dữ liệu đã lưu.
Để thao tác session storage của một miền, bạn gọi Window.sessionStorage; còn với local storage thì bạn gọi Window.localStorage.
Thuộc tính thể hiện
Storage.lengthRead only-
Trả về một số nguyên biểu thị số mục dữ liệu được lưu trong đối tượng
Storage.
Phương thức thể hiện
Storage.key()-
Khi được truyền vào một số
n, phương thức này sẽ trả về tên của khóa thứntrong bộ lưu trữ. Storage.getItem()-
Khi được truyền vào tên khóa, phương thức sẽ trả về giá trị của khóa đó.
Storage.setItem()-
Khi được truyền vào tên khóa và giá trị, phương thức sẽ thêm khóa đó vào bộ lưu trữ, hoặc cập nhật giá trị của khóa nếu nó đã tồn tại.
Storage.removeItem()-
Khi được truyền vào tên khóa, phương thức sẽ xóa khóa đó khỏi bộ lưu trữ.
Storage.clear()-
Khi được gọi, phương thức sẽ xóa sạch mọi khóa trong bộ lưu trữ.
Ví dụ
Ở đây, chúng ta truy cập một đối tượng Storage bằng cách gọi localStorage. Trước tiên chúng ta kiểm tra xem local storage có chứa mục dữ liệu nào hay không bằng !localStorage.getItem('bgcolor'). Nếu có, chúng ta chạy một hàm tên là setStyles() để lấy các mục dữ liệu bằng Storage.getItem() và dùng các giá trị đó để cập nhật kiểu hiển thị của trang. Nếu không có, chúng ta chạy một hàm khác là populateStorage(), hàm này dùng Storage.setItem() để đặt giá trị cho các mục, rồi chạy setStyles().
if (!localStorage.getItem("bgcolor")) {
populateStorage();
} else {
setStyles();
}
function populateStorage() {
localStorage.setItem("bgcolor", document.getElementById("bgcolor").value);
localStorage.setItem("font", document.getElementById("font").value);
localStorage.setItem("image", document.getElementById("image").value);
setStyles();
}
function setStyles() {
const currentColor = localStorage.getItem("bgcolor");
const currentFont = localStorage.getItem("font");
const currentImage = localStorage.getItem("image");
document.getElementById("bgcolor").value = currentColor;
document.getElementById("font").value = currentFont;
document.getElementById("image").value = currentImage;
htmlElem.style.backgroundColor = `#${currentColor}`;
pElem.style.fontFamily = currentFont;
imgElem.setAttribute("src", currentImage);
}
Note: Để xem ví dụ này chạy đầy đủ, hãy xem Web Storage Demo.
Thông số kỹ thuật
| Specification |
|---|
| HTML # storage |