Cookie Store API là gì?
Cookie Store API hiển thị cookie HTTP cho trình chạy dịch vụ và
cung cấp một giải pháp thay thế không đồng bộ cho document.cookie
. API giúp thực hiện việc này
dễ dàng hơn để:
- Tránh hiện tượng giật trên luồng chính bằng cách truy cập cookie không đồng bộ.
- Tránh thăm dò cookie vì có thể quan sát thấy các thay đổi đối với cookie.
- Truy cập vào cookie của trình chạy dịch vụ.
Trạng thái hiện tại
Bước | Trạng thái |
---|---|
1. Tạo thông báo giải thích | Hoàn tất |
2. Tạo bản nháp ban đầu của thông số kỹ thuật | Hoàn tất |
**3. Thu thập ý kiến phản hồi và lặp lại theo quy cách** | **Đang tiến hành** |
4. Bản dùng thử theo nguyên gốc | Đã tạm dừng |
5. Khởi chạy | Not started |
Làm cách nào để sử dụng kho lưu trữ cookie không đồng bộ?
Bật bản dùng thử theo nguyên gốc
Để dùng thử cục bộ, bạn có thể bật API trên dòng lệnh:
chrome --enable-blink-features=CookieStore
Việc chuyển cờ này vào dòng lệnh sẽ bật API toàn cầu trong Chrome cho phiên hiện tại.
Ngoài ra, bạn có thể bật #enable-experimental-web-platform-features
gắn cờ trong chrome://flags
.
Bạn (có thể) không cần cookie
Trước khi tìm hiểu kỹ hơn về API mới, tôi muốn khẳng định rằng cookie vẫn là dữ liệu gốc kém nhất của bộ nhớ phía máy khách của nền tảng, và vẫn nên được dùng làm phương án cuối cùng. Đây không phải là sự cố - cookie là phía máy khách đầu tiên của Web mà chúng tôi đã học hỏi được nhiều hơn kể từ đó.
Sau đây là những lý do chính khiến bạn nên tránh sử dụng cookie:
Cookie đưa giản đồ lưu trữ của bạn vào API phụ trợ. Mỗi yêu cầu HTTP chứa một ảnh chụp nhanh của ngăn chứa cookie. Điều này giúp bạn dễ dàng các kỹ sư phụ trợ để giới thiệu các phần phụ thuộc trên định dạng cookie hiện tại. Một lần trong trường hợp này, giao diện người dùng của bạn không thể thay đổi giản đồ bộ nhớ nếu không triển khai một thay đổi phù hợp với phần phụ trợ.
Cookie có một mô hình bảo mật phức tạp. Các tính năng trên nền tảng web hiện đại đều tuân thủ cùng một chính sách nguồn gốc, tức là mỗi ứng dụng sẽ có hộp cát riêng và hoàn toàn độc lập với các ứng dụng khác mà người dùng có thể đang chạy. Phạm vi cookie tạo ra một câu chuyện bảo mật phức tạp hơn nhiều và chỉ đơn thuần cố gắng để tăng gấp đôi quy mô của bài viết này.
Cookie có chi phí hiệu suất cao. Trình duyệt cần cung cấp ảnh chụp nhanh trong mọi yêu cầu HTTP, nên mọi thay đổi đối với cookie đều phải được truyền tải trên các ngăn xếp mạng và bộ nhớ. Các trình duyệt hiện đại có tối ưu hoá cho cửa hàng cookie, nhưng chúng tôi sẽ không bao giờ có thể có hiệu quả như các cơ chế lưu trữ khác mà không cần vào ngăn xếp mạng.
Vì tất cả những lý do trên, các ứng dụng Web hiện đại cần tránh sử dụng cookie và thay vào đó lưu trữ giá trị nhận dạng phiên vào IndexedDB và thêm rõ ràng mã nhận dạng vào tiêu đề hoặc nội dung của yêu cầu HTTP cụ thể, thông qua API tìm nạp.
Dù vậy, bạn vẫn đang đọc bài viết này vì bạn có lý do để sử dụng cookie...
Đọc cookie và loại bỏ hiện tượng giật
Nhà thờ
document.cookie
API là một nguồn khá đảm bảo hiện tượng giật cho ứng dụng của bạn. Ví dụ:
bất cứ khi nào bạn sử dụng phương thức getter document.cookie
, trình duyệt phải ngừng thực thi
JavaScript cho đến khi có thông tin cookie bạn đã yêu cầu. Quá trình này có thể mất
hop quá trình hoặc lượt đọc ổ đĩa và sẽ khiến giao diện người dùng bị giật.
Cách khắc phục đơn giản cho vấn đề này là chuyển từ document.cookie
getter vào Cookie Store API không đồng bộ.
await cookieStore.get('session_id');
// {
// domain: "example.com",
// expires: 1593745721000,
// name: "session_id",
// path: "/",
// sameSite: "unrestricted",
// secure: true,
// value: "yxlgco2xtqb.ly25tv3tkb8"
// }
Bạn có thể thay thế phương thức setter document.cookie
theo cách tương tự. Lưu ý
rằng thay đổi chỉ được đảm bảo sẽ được áp dụng sau khi Lời hứa được trả về
cookieStore.set
phân giải.
await cookieStore.set({name: 'opt_out', value: '1'});
// undefined
Quan sát, không thăm dò ý kiến
Một ứng dụng phổ biến để truy cập vào cookie từ JavaScript là phát hiện khi
người dùng đăng xuất và cập nhật giao diện người dùng. Việc này hiện được thực hiện bằng cách thăm dò ý kiến
document.cookie
gây ra hiện tượng giật và có tác động tiêu cực đến pin
cuộc sống.
Cookie Store API mang đến một phương pháp thay thế để quan sát cookie mà không cần thăm dò ý kiến.
cookieStore.addEventListener('change', event => {
for (const cookie of event.changed) {
if (cookie.name === 'session_id') sessionCookieChanged(cookie.value);
}
for (const cookie of event.deleted) {
if (cookie.name === 'session_id') sessionCookieChanged(null);
}
});
Chào mừng nhân viên dịch vụ
Do thiết kế đồng bộ nên API document.cookie
chưa được thực hiện
có sẵn cho
service worker.
Cookie Store API không đồng bộ và do đó được cho phép trong dịch vụ
trình thực thi.
Việc tương tác với cookie cũng hoạt động theo cách tương tự như trong ngữ cảnh tài liệu và trong trình chạy dịch vụ.
// Works in documents and service workers.
async function logOut() {
await cookieStore.delete('session_id');
}
Tuy nhiên, việc quan sát các thay đổi về cookie lại có đôi chút khác biệt trong trình chạy dịch vụ. Đánh thức thì một trình chạy dịch vụ có thể khá tốn kém, vì vậy chúng ta phải mô tả rõ ràng những thay đổi về cookie mà worker quan tâm.
Trong ví dụ bên dưới, một ứng dụng sử dụng IndexedDB để lưu dữ liệu người dùng vào bộ nhớ đệm theo dõi các thay đổi đối với cookie của phiên và loại bỏ dữ liệu được lưu trong bộ nhớ đệm khi người dùng đăng xuất.
// Specify the cookie changes we're interested in during the install event.
self.addEventListener('install', event => {
event.waitUntil(cookieStore.subscribeToChanges([{name: 'session_id'}]));
});
// Delete cached data when the user logs out.
self.addEventListener('cookiechange', event => {
for (const cookie of event.deleted) {
if (cookie.name === 'session_id') {
indexedDB.deleteDatabase('user_cache');
break;
}
}
});
Các phương pháp hay nhất
Sắp ra mắt.
Phản hồi
Nếu bạn dùng thử API này, vui lòng cho chúng tôi biết suy nghĩ của bạn! Vui lòng chuyển hướng
và phản hồi về hình dạng API
kho lưu trữ thông số kỹ thuật,
và báo cáo lỗi triển khai cho
Blink>Storage>CookiesAPI
Thành phần nhấp nháy.
Chúng tôi đặc biệt quan tâm đến việc tìm hiểu về các phép đo hiệu suất và việc sử dụng các trường hợp ngoài những trường hợp được nêu trong phần giải thích.
Tài nguyên khác
- Thông báo giải thích công khai
- Thông số kỹ thuật
- Theo dõi lỗi
- mục chromestatus.com
- Chuỗi bài thảo luận về WICG
- Thành phần nhấp nháy:
Blink>Storage>CookiesAPI