LocalStorage & dữ liệu phía client

LocalStorage vs SessionStorage

Cả hai đều lưu dữ liệu dạng key-value ngay trên trình duyệt. Khác biệt: localStorage sống mãi cho đến khi bạn xoá; sessionStorage mất khi đóng tab. Dung lượng khoảng 5-10 MB.

API cơ bản

// File: storage.js
// Lưu (chỉ lưu được string)
localStorage.setItem("theme", "dark")

// Đọc
const theme = localStorage.getItem("theme") // "dark"

// Xoá 1 key
localStorage.removeItem("theme")

// Xoá tất cả
localStorage.clear()

// Lưu object/array → phải JSON.stringify
const todos = [{ title: "Học DOM", done: false }]
localStorage.setItem("todos", JSON.stringify(todos))

// Đọc object/array → phải JSON.parse
const saved = JSON.parse(localStorage.getItem("todos"))

Ví dụ: Todo list lưu vào localStorage

// File: todo-ls.js
const STORAGE_KEY = "my_todos"

// Đọc dữ liệu đã lưu (hoặc mảng rỗng nếu chưa có)
function loadTodos() {
  const raw = localStorage.getItem(STORAGE_KEY)
  return raw ? JSON.parse(raw) : []
}

// Lưu lại sau mỗi thay đổi
function saveTodos(todos) {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(todos))
}

// Thêm việc mới
function addTodo(title) {
  const todos = loadTodos()
  todos.push({ title, done: false, id: Date.now() })
  saveTodos(todos)
  render(todos)
}

• Phân biệt localStorage và sessionStorage
• Dùng setItem, getItem, removeItem
• Lưu/đọc object bằng JSON.stringify/parse
• Biết không lưu dữ liệu nhạy cảm trong localStorage