Cách sử dụng HTML5 localStorage và sessionStorage

HTML5 cung cấp 2 cơ chế lưu trữ client-side vượt qua hạn chế của Cookie (4KB, gửi kèm mọi request HTTP):

Đặc điểm	sessionStorage	localStorage
Đời sống	Kết thúc khi đóng tab/cửa sổ	Vĩnh viễn (cho đến khi xóa thủ công/code)
Phạm vi	Chỉ tab hiện tại (mỗi tab riêng biệt)	Chia sẻ mọi tab/cửa sổ cùng origin
Dung lượng	~5-10 MB	~5-10 MB
API	`setItem(key, val)`, `getItem(key)`, `removeItem(key)`, `clear()`, `key(index)`, `length`

Ví dụ: sessionStorage (đếm lần tải trang trong phiên)

<!DOCTYPE HTML>
<html>
<body>
  <script type="text/javascript">
    if (sessionStorage.hits) {
      sessionStorage.hits = Number(sessionStorage.hits) + 1;
    } else {
      sessionStorage.hits = 1;
    }
    document.write("Tổng lượt tải (phiên này): " + sessionStorage.hits);
  </script>
  <p>Làm mới trang để tăng số lượt. Đóng tab và mở lại sẽ reset về 1.</p>
</body>
</html>

Ví dụ: localStorage (đếm lượt truy cập vĩnh viễn)

<!DOCTYPE HTML>
<html>
<body>
  <script type="text/javascript">
    if (localStorage.hits) {
      localStorage.hits = Number(localStorage.hits) + 1;
    } else {
      localStorage.hits = 1;
    }
    document.write("Tổng lượt truy cập (vĩnh viễn): " + localStorage.hits);
  </script>
  <p>Làm mới trang để tăng. Đóng trình duyệt mở lại vẫn giữ số.</p>
</body>
</html>

Lưu ý bảo mật: Không lưu dữ liệu nhạy cảm (token, mật khẩu) trong localStorage/sessionStorage (dễ bị XSS đánh cắp). Dùng HttpOnly Cookie cho token auth.