Bài đọc

Trạng thái và localStorage: nền tảng và mô hình tư duy

2 phút đọc

Đây là bài 1 của chương 6: Trạng thái và localStorage, thuộc khóa demo JavaScript. Nội dung được dùng để trải nghiệm cấu trúc chương trình học; hãy thực hành trên dữ liệu và môi trường thử nghiệm riêng. Trong dự án xuyên suốt, bạn sẽ xây dựng ứng dụng danh sách công việc có tìm kiếm, lọc và lưu trạng thái trên trình duyệt.

Mục tiêu cụ thể

Tách trạng thái dữ liệu khỏi HTML giúp render nhất quán. LocalStorage lưu chuỗi, nên cần JSON và phương án khi dữ liệu hỏng hoặc dung lượng đầy.

Hiểu vấn đề trước khi dùng công cụ

Chương này tập trung vào một quyết định cụ thể: Lưu danh sách công việc và bộ lọc, sau đó thử chỉnh JSON thành dữ liệu lỗi trong DevTools. Đừng bắt đầu bằng cách chép nguyên ví dụ. Hãy chỉ ra thành phần nào là dữ liệu, thành phần nào là quy tắc và đâu là kết quả quan sát được. Một giải pháp đúng với dữ liệu mẫu vẫn có thể sai khi đầu vào rỗng, kích thước lớn hơn hoặc có hai thao tác xảy ra gần nhau.

Ví dụ tối thiểu

function readTasks() {
  try {
    const value = JSON.parse(localStorage.getItem("tasks") ?? "[]");
    return Array.isArray(value) ? value : [];
  } catch { return []; }
}

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

LocalStorage có thể bị đọc bởi mã chạy trên cùng origin. Không lưu thông tin nhạy cảm hay coi dữ liệu từ storage là luôn hợp lệ.

Câu hỏi để tự giải thích

Bạn sẽ giải thích trạng thái và localstorage cho người mới bằng ví dụ nào?
Phần nào của ví dụ là giả định, phần nào cần kiểm tra bằng thực nghiệm?
Nếu bỏ một điều kiện quan trọng, kết quả sẽ sai ở đâu?

Kết quả cần đạt

Tải lại trang giữ được dữ liệu
Dữ liệu lỗi không làm trang trắng
Không ghi thông tin nhạy cảm