Đây là bài 5 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.
Bộ câu hỏi tự kiểm tra
- Vì sao trạng thái và localstorage cần được xem xét riêng trong dự án JavaScript?
- Giải thích bằng lời của bạn: 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.
- Phát hiện vấn đề trong tình huống: 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ệ.
- Bạn sẽ giữ bằng chứng gì để chứng minh giải pháp hoạt động?
Tiêu chí chấm
- 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
Bài mở rộng
Bắt đầu từ yêu cầu 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. Thay đổi quy mô, độ dài dữ liệu hoặc thứ tự thao tác. Chọn đúng một biến thể phù hợp với chương rồi dự đoán tác động trước khi thử. Ví dụ là công cụ để hiểu nguyên lý, không phải đáp án duy nhất.
Gợi ý tự đánh giá
- Mức 1: nhắc lại được khái niệm nhưng chưa tự thực hiện.
- Mức 2: tự hoàn thành ví dụ và giải thích các bước.
- Mức 3: xử lý được trường hợp biên và giải thích lựa chọn khác.
Nếu chưa đạt mức 2, quay lại bài thực hành thay vì chỉ đọc đáp án. Khi đã đạt mức 3, ghi lại một cách giải khác và so sánh độ đơn giản, khả năng kiểm chứng và giới hạn của hai phương án.
Lưu bằng chứng
Tạo bảng gồm ca thử, đầu vào, kết quả mong đợi, kết quả thực tế và kết luận. Chỉ đánh dấu hoàn thành sau khi từng tiêu chí có kết quả quan sát được; bài tự kiểm tra này không tự chấm điểm và không cấp chứng chỉ.