LẬP TRÌNH WEB HTML - CSS - JAVA SCRIPT
BÀI 21: LƯU DỮ LIỆU TRONG WEB JS
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") {
alert("ok");
} else {
alert("not ok");
}
// 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");
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:
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:
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...";
}
}