Loạt bài JavaScript cơ bản · Bài 17/18 — Mục lục học tập

Biến thông thường mất khi trang được tải lại. Với dữ liệu nhỏ không nhạy cảm như danh sách công việc thực hành, localStorage cho phép lưu trong trình duyệt và đọc lại sau. Nó không thay thế cơ sở dữ liệu hoặc cơ chế đăng nhập.

localStorage lưu chuỗi

localStorage.setItem("hvc-learning-name", "An");
const name = localStorage.getItem("hvc-learning-name");
console.log(name); // An
localStorage.removeItem("hvc-learning-name");

Dữ liệu được phân tách theo origin, tức tổ hợp giao thức, tên miền và cổng. Trang http và https có vùng lưu khác nhau. Khi thực hành, nên mở bằng máy chủ tĩnh cục bộ và giữ cùng địa chỉ. Hành vi trên URL file có thể khác giữa trình duyệt.

Đổi đối tượng thành JSON và đọc lại

const progress = { completed: 4, course: "JavaScript" };
const text = JSON.stringify(progress);
console.log(text);
const restored = JSON.parse(text);
console.log(restored.completed); // 4

JSON.stringify biến dữ liệu phù hợp thành chuỗi JSON; JSON.parse đọc chuỗi thành giá trị JavaScript. JSON không lưu nguyên vẹn mọi kiểu dữ liệu của JavaScript, chẳng hạn hàm. Trong loạt bài này, chỉ lưu chuỗi, số, boolean, mảng và đối tượng đơn giản.

Đọc dữ liệu an toàn

const STORAGE_KEY = "hvc-learning-progress-v1";

function loadProgress() {
  try {
    const raw = localStorage.getItem(STORAGE_KEY);
    if (raw === null) return { completed: 0 };
    const data = JSON.parse(raw);
    if (!data || !Number.isInteger(data.completed) || data.completed < 0) {
      return { completed: 0 };
    }
    return { completed: data.completed };
  } catch (error) {
    console.warn("Không đọc được tiến độ:", error);
    return { completed: 0 };
  }
}

function saveProgress(progress) {
  try {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(progress));
    return true;
  } catch (error) {
    console.warn("Không lưu được tiến độ:", error);
    return false;
  }
}

const progress = loadProgress();
progress.completed += 1;
console.log(saveProgress(progress));

getItem trả null nếu khóa chưa tồn tại. Chuỗi có thể không phải JSON hợp lệ, hoặc đúng JSON nhưng sai cấu trúc. Vì vậy cần cả try…catch lẫn kiểm tra dữ liệu. Lưu có thể thất bại do giới hạn dung lượng hoặc chính sách trình duyệt; trả boolean giúp giao diện quyết định thông báo phù hợp.

Giới hạn cần hiểu

• Dữ liệu chỉ ở trình duyệt hiện tại, không tự đồng bộ sang thiết bị khác.
• Người dùng có thể xóa hoặc chỉnh dữ liệu; không coi đó là dữ liệu đáng tin cậy.
• Không lưu mật khẩu, khóa bí mật hoặc thông tin nhạy cảm trong bài thực hành.
• Chỉ xóa khóa của ứng dụng bằng removeItem; tránh clear vì nó xóa toàn bộ vùng localStorage của origin.

Bài tập

Lưu tiến độ, tải lại trang và xem completed tăng. Sau đó thử dữ liệu hỏng:

localStorage.setItem("hvc-learning-progress-v1", "JSON bị hỏng");
console.log(loadProgress()); // { completed: 0 }

Cuối cùng, xóa đúng khóa của ví dụ. Ghi nhớ: tải và lưu là hai thao tác có thể thất bại. Thiết kế giá trị mặc định và thông báo để giao diện vẫn sử dụng được.