Cookie Store API của trình duyệt là một cách tiếp cận hiện đại để xử lý cookie trong các ứng dụng web. Cách truyền thống là sử dụng document.cookie, nhưng phương pháp này dễ xảy ra lỗi do phải thao tác với các cặp key/value dưới dạng chuỗi. Ngoài ra, document.cookie là một thao tác đồng bộ, có thể chặn luồng chính, điều này không phù hợp với xu hướng hiện nay là ưu tiên xử lý bất đồng bộ để cải thiện hiệu suất. Nó còn phụ thuộc vào đối tượng document, do đó không thể sử dụng trong môi trường Service Worker.
Trong bài viết này, chúng ta sẽ khám phá cách API mới này giúp đơn giản hóa việc quản lý cookie. Chúng ta sẽ xây dựng một trang web có hai chế độ sáng và tối, cho phép người dùng chuyển đổi chủ đề và lưu tùy chọn của họ vào cookie cho các lần truy cập sau.
Hiểu về quản lý Cookie: Trước đây và hiện tại
Truyền thống, các lập trình viên web sử dụng document.cookie để làm việc với cookie. Ví dụ:
// Setting a cookie
document.cookie = "theme=dark; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/"; // Reading cookies
function getCookie(name) { const value = `; ${document.cookie}`; const parts = value.split(`; ${name}=`); if (parts.length === 2) return parts.pop().split(";").shift();
} // Using the cookie
const theme = getCookie("theme");
if (theme === "dark") { document.body.classList.add("dark-theme");
}
Thoạt nhìn, việc thiết lập cookie với document.cookie có cảm giác như đang ghi đè toàn bộ giá trị. Việc xử lý chuỗi để đọc giá trị cookie rất rườm rà và dễ mắc lỗi. Khi có nhiều cookie, bạn phải phân tích chuỗi nhiều lần, và vì thao tác này là đồng bộ nên có thể làm chậm ứng dụng.
Ngược lại, Cookie Store API giải quyết những vấn đề đó bằng cách cung cấp giao diện dựa trên Promise với các lợi ích sau:
- Các phương thức đọc/ghi rõ ràng và trực quan hơn
- Hỗ trợ lắng nghe sự kiện thay đổi cookie
- Các thao tác bất đồng bộ không chặn luồng chính
- Hỗ trợ xử lý nhiều cookie hiệu quả
Xây dựng Theme Switcher với Cookie Store API
Chúng ta sẽ xây dựng một chức năng chuyển đổi chủ đề (theme) minh họa cách sử dụng Cookie Store API. Người dùng có thể chuyển giữa chế độ sáng và tối, và tùy chọn của họ sẽ được lưu để duy trì sau khi tải lại trang hoặc phiên trình duyệt mới.
HTML:
<div class="container"> <h1>CookieStore API Demo</h1> <button class="theme-switcher" onclick="toggleTheme()">Toggle Theme</button> <div class="cookie-info"> <h3>Current Cookie State:</h3> <div id="cookieDisplay"></div> </div>
</div>
JavaScript:
// Check if CookieStore API is supported
if ("cookieStore" in window) { // Listen for cookie changes cookieStore.addEventListener("change", (event) => { console.log("Cookie change detected:", event); updateCookieDisplay(); });
} // Initialize theme on page load
async function initializeTheme() { try { const themeCookie = await cookieStore.get("theme"); if (themeCookie && themeCookie.value === "dark") { document.body.classList.add("dark-theme"); } updateCookieDisplay(); } catch (error) { console.error("Error reading theme cookie:", error); }
} // Toggle theme and save preference
async function toggleTheme() { const isDarkTheme = document.body.classList.toggle("dark-theme"); try { await cookieStore.set({ name: "theme", value: isDarkTheme ? "dark" : "light", expires: Date.now() + 30 * 24 * 60 * 60 * 1000, // 30 days sameSite: "strict", }); } catch (error) { console.error("Error saving theme preference:", error); }
}
Những điểm nổi bật:
- Mẫu async/await: Cookie Store API sử dụng Promise nên dễ dàng tích hợp với async/await, giúp mã gọn gàng hơn.
- Phát hiện thay đổi cookie: Có thể lắng nghe sự kiện change để cập nhật UI khi cookie thay đổi theo thời gian thực.
- Đọc/ghi đơn giản hơn: Không còn phải xử lý chuỗi thủ công nhờ các phương thức như
set(),get(), vàgetAll().
Hỗ trợ trình duyệt và phương án dự phòng
Tính đến năm 2024, Cookie Store API chưa được hỗ trợ trên tất cả trình duyệt. Chrome và Edge đã hỗ trợ, nhưng Firefox và Safari vẫn đang trong quá trình triển khai.
Vì vậy, trong các ứng dụng thực tế, bạn nên triển khai cơ chế dự phòng. Hãy kiểm tra xem cookieStore có tồn tại trong window không:
class CookieManager { constructor() { this.useModernAPI = "cookieStore" in window; } async setCookie(name, value, options = {}) { if (this.useModernAPI) { return cookieStore.set({ name, value, ...options }); } // Fallback to traditional approach let cookie = `${name}=${value}`; if (options.expires) { cookie += `; expires=${new Date(options.expires).toUTCString()}`; } if (options.path) { cookie += `; path=${options.path}`; } document.cookie = cookie; } async getCookie(name) { if (this.useModernAPI) { return cookieStore.get(name); } // Fallback implementation const value = `; ${document.cookie}`; const parts = value.split(`; ${name}=`); if (parts.length === 2) { return { name, value: parts.pop().split(";").shift(), }; } return null; }
}
Tổng kết
Cookie Store API giúp cải thiện đáng kể việc xử lý cookie. Giao diện dựa trên Promise, khả năng phát hiện thay đổi và phương thức rõ ràng khiến nó trở thành công cụ mạnh mẽ cho phát triển web hiện đại. Dù hiện tại chưa được hỗ trợ toàn diện, bạn có thể kết hợp nó với cơ chế dự phòng để tạo ra mã nguồn bền vững và sẵn sàng cho tương lai.