Quản lý bộ nhớ ngoại tuyến HTML5

HTML5 đã giới thiệu nhiều API lưu trữ cho phép bạn lưu trữ một lượng lớn dữ liệu cục bộ trong trình duyệt của người dùng. Tuy nhiên, theo mặc định, dung lượng được phân bổ cho mỗi ứng dụng bị giới hạn ở một vài megabyte. Google Chrome cho phép bạn yêu cầu hạn mức bộ nhớ lớn hơn, vượt quá giới hạn chỉ là 5 MB trước đó.

Tài liệu này giới thiệu cho bạn các khái niệm cơ bản về các loại bộ nhớ được dùng trong Chrome và mô tả API quản lý hạn mức thử nghiệm để cho phép bạn quản lý hạn mức bộ nhớ của mình. Tài liệu này giả định rằng bạn đã quen thuộc với các khái niệm chung về bộ nhớ phía máy khách và biết cách sử dụng API ngoại tuyến.

Nội dung

1. Các loại bộ nhớ
   1. Tạm thời
   2. Cố định
   3. Không giới hạn
   4. So sánh các loại bộ nhớ
2. Quản lý hạn mức của bạn
   1. Mức sử dụng và khả năng sử dụng bộ nhớ truy vấn
   2. Yêu cầu thêm bộ nhớ
   3. Đặt lại hạn mức để thử nghiệm
3. Tài liệu tham khảo API
   1. Hằng số
   2. Tổng quan về phương thức
   3. Phương thức
4. Phát triển trong tương lai

Loại bộ nhớ

Trong Google Chrome, bạn có thể yêu cầu ba loại bộ nhớ:

• Tạm thời
• Cố định
• Không giới hạn

Các loại bộ nhớ này được mô tả chi tiết hơn trong các phần sau và so sánh với từng loại trong bảng bên dưới.

Bộ nhớ tạm thời

Bộ nhớ tạm thời là bộ nhớ tạm thời được cung cấp cho mọi ứng dụng web. Chrome sẽ tự động cấp cho ứng dụng của bạn bộ nhớ tạm thời để bạn không cần yêu cầu phân bổ.

Chia sẻ nhóm

Bộ nhớ tạm thời được chia sẻ giữa tất cả các ứng dụng web chạy trong trình duyệt. Bộ nhớ dùng chung có thể chiếm tới 1/3 dung lượng ổ đĩa còn trống. Bộ nhớ mà các ứng dụng đã dùng được bao gồm khi tính toán bộ nhớ dùng chung; có nghĩa là cách tính này dựa trên (available storage space + storage being used by apps) * .333 .

Mỗi ứng dụng có thể có tối đa 20% nhóm dùng chung. Ví dụ: nếu tổng dung lượng ổ đĩa trống là 60 GB, thì bộ nhớ dùng chung sẽ là 20 GB và ứng dụng có thể có tối đa 4 GB. Mức này được tính từ 20% (tối đa 4 GB) của 1/3 (tối đa 20 GB) của dung lượng ổ đĩa còn trống (60 GB).

Yêu cầu thêm dung lượng

Mặc dù bạn có thể truy vấn để biết dung lượng bộ nhớ còn trống cho ứng dụng và lượng dữ liệu đã lưu trữ cho ứng dụng, nhưng bạn không thể yêu cầu thêm dung lượng lưu trữ tạm thời. Nếu một ứng dụng vượt quá hạn mức phân bổ, hệ thống sẽ báo lỗi.

Hết dung lượng lưu trữ

Sau khi vượt quá hạn mức bộ nhớ cho toàn bộ nhóm, toàn bộ dữ liệu được lưu trữ cho máy chủ lưu trữ được sử dụng gần đây nhất sẽ bị xoá. Tuy nhiên, trình duyệt sẽ không dọn sạch dữ liệu trong LocalStorage và SessionStorage. Đối với dữ liệu được lưu trữ trong các API ngoại tuyến khác, trình duyệt sẽ xoá toàn bộ chứ không phải một phần dữ liệu để dữ liệu ứng dụng không bị hỏng theo cách không mong muốn.

Vì mỗi ứng dụng bị giới hạn ở tối đa 20% bộ nhớ gộp, nên khả năng xoá chỉ có thể xảy ra nếu người dùng chủ động chạy hơn 5 ứng dụng ngoại tuyến, trong đó mỗi ứng dụng sử dụng bộ nhớ tối đa.

Tuy nhiên, không gian lưu trữ có thể sử dụng có thể thu hẹp lại khi người dùng thêm nhiều tệp hơn vào ổ đĩa cứng. Khi dung lượng ổ đĩa còn trống bị quá tải (Hãy nhớ rằng nhóm dùng chung chỉ chiếm một nửa dung lượng ổ đĩa hiện tại), trình duyệt sẽ xoá tất cả dữ liệu đã lưu trữ cho máy chủ lưu trữ được sử dụng gần đây nhất.

Bộ nhớ liên tục

Bộ nhớ ổn định là bộ nhớ sẽ được lưu trên trình duyệt trừ khi người dùng xoá đi. API này chỉ dành cho các ứng dụng sử dụng API Hệ thống tệp, nhưng cuối cùng sẽ có sẵn cho các API ngoại tuyến khác như IndexedDB và Application Cache.

Một ứng dụng có thể có hạn mức bộ nhớ lâu dài lớn hơn so với bộ nhớ tạm thời, nhưng bạn phải yêu cầu bộ nhớ bằng cách sử dụng hạn mức bộ nhớ và người dùng phải cấp cho bạn quyền sử dụng nhiều dung lượng lưu trữ hơn. Chrome hiển thị thanh thông tin nhắc người dùng cấp thêm dung lượng lưu trữ cục bộ cho ứng dụng.

Không gian lưu trữ không giới hạn

Bộ nhớ không giới hạn tương tự như bộ nhớ ổn định, nhưng chỉ dành cho các ứng dụng và tiện ích của Chrome (tệp .crx). Dung lượng bộ nhớ không giới hạn chỉ bị giới hạn bởi dung lượng có sẵn trong ổ đĩa cứng của người dùng. Bạn có thể yêu cầu quyền unlimitedStorage trong tệp kê khai cho một ứng dụng hoặc tiện ích. Khi cài đặt, người dùng sẽ nhận được thông báo về các quyền mà ứng dụng hoặc tiện ích yêu cầu. Bằng cách tiếp tục cài đặt, người dùng ngầm cấp quyền cho tất cả các trang có URL được liệt kê trong tệp manifest.json.

Để tìm hiểu thêm, hãy xem hướng dẫn tương ứng cho nhà phát triển cho ứng dụng và tiện ích.

So sánh các loại bộ nhớ

Bảng sau đây mô tả sự khác biệt giữa 3 loại bộ nhớ này.

Quản lý hạn mức của bạn

Với API quản lý hạn mức mà chúng tôi đã ra mắt trong Chrome 13, bạn có thể làm những việc sau:

• Mức sử dụng và khả năng sử dụng bộ nhớ truy vấn
• Yêu cầu thêm bộ nhớ
• Đặt lại hạn mức để thử nghiệm

API được triển khai bằng đối tượng toàn cục window.webkitStorageInfo.

Để có tài liệu tham khảo, hãy xem phần tiếp theo.

Truy vấn tình trạng còn hàng và mức sử dụng bộ nhớ

Để truy vấn dung lượng bộ nhớ đang được sử dụng và dung lượng còn trống cho máy chủ lưu trữ, hãy gọi queryUsageAndQuota() như sau:

• Loại bộ nhớ bạn muốn kiểm tra
• Gọi lại thành công

Mức sử dụng mà API báo cáo có thể không khớp với kích thước thực tế của dữ liệu người dùng, vì mỗi bộ nhớ có thể cần thêm một số byte để lưu trữ siêu dữ liệu. Ngoài ra, việc cập nhật trạng thái có thể bị trễ, dẫn đến việc API không phản ánh trạng thái bộ nhớ gần đây nhất.

Đoạn mã sau đây hướng dẫn bạn cách hỏi về dung lượng lưu trữ:

// Request storage usage and capacity left
// Choose either Temporary or Persistent
navigator.webkitTemporaryStorage.queryUsageAndQuota (
    function(usedBytes, grantedBytes) {
        console.log('we are using ', usedBytes, ' of ', grantedBytes, 'bytes');
    },
    function(e) { console.log('Error', e);  }
);

Nếu muốn yêu cầu về trạng thái của bộ nhớ liên tục, bạn chỉ cần thay thế webkitStorageInfo.TEMPORARY bằng webkitStorageInfo.PERSISTENT. Enum này cũng nằm trong đối tượng window (không gian tên chung), vì vậy, bạn cũng có thể sử dụng window.PERSISTENT và window.TEMPORARY.

Yêu cầu thêm bộ nhớ

Bạn không cần yêu cầu thêm bộ nhớ tạm thời vì quá trình phân bổ diễn ra tự động và bạn không thể vượt quá giới hạn tối đa (như mô tả trong bảng).

Để lưu trữ liên tục cho API Hệ thống tệp, hạn mức mặc định là 0. Vì vậy, bạn cần yêu cầu rõ ràng bộ nhớ cho ứng dụng của mình. Gọi requestQuota() bằng lệnh sau:

• Loại bộ nhớ
• Kích thước
• Gọi lại thành công

Tuỳ thuộc vào yêu cầu của bạn, những trường hợp sau sẽ xảy ra:

• Nếu bạn yêu cầu hạn mức lớn hơn, trình duyệt sẽ hiển thị thanh thông tin cho người dùng và nhắc họ cấp hoặc từ chối cấp quyền để tăng hạn mức. Trong một số trường hợp, yêu cầu có thể bị từ chối ngầm và hạn mức hiện tại hoặc hạn mức nhỏ hơn sẽ được trả về.
• Nếu hạn mức bạn yêu cầu nhỏ hơn mức phân bổ hiện tại của ứng dụng, thì sẽ không có lời nhắc nào xuất hiện.
• Nếu yêu cầu dung lượng lưu trữ vượt quá mức cho phép, bạn sẽ gặp lỗi (QUOTA_EXCEEDED_ERR).
• Nếu gọi lại requestQuota() sau khi người dùng đã cấp quyền, thì sẽ không có gì xảy ra. Vì vậy, đừng bận tâm đến việc gọi lại phương thức này.

Phần sau đây hướng dẫn cách yêu cầu thêm dung lượng lưu trữ:

// Request Quota (only for File System API)
var requestedBytes = 1024*1024*10; // 10MB

navigator.webkitPersistentStorage.requestQuota (
    requestedBytes, function(grantedBytes) {
        window.requestFileSystem(PERSISTENT, grantedBytes, onInitFs, errorHandler);

    }, function(e) { console.log('Error', e); }
);
});

Đặt lại hạn mức để kiểm thử

Khi kiểm thử bộ nhớ trong ứng dụng, bạn nên xoá dữ liệu đã lưu trữ để có thể kiểm thử mới về việc quản lý hạn mức trong ứng dụng của mình. Cách làm như sau:

1. Nhập chrome://settings/cookies vào thanh địa chỉ.
2. Tìm ứng dụng của bạn.
3. Chọn ứng dụng của bạn.
4. Nhấp vào dấu X ở bên phải của phần được đánh dấu.

Tài liệu tham khảo API

Phần này trình bày các phương thức của API quản lý hạn mức.

Hằng số

Sau đây là các hằng số webkitStorageInfo cho biết loại bộ nhớ.

Tổng quan về phương pháp

Phương thức

queryUsageAndQuota

Kiểm tra dung lượng bộ nhớ đang được sử dụng và dung lượng trống còn lại cho máy chủ lưu trữ.

 // you could also use it from webkitPersistentStorage
navigator.webkitTemporaryStorage.queryUsageAndQuota(
      successCallback,
      errorCallback);

• successCallback: Lệnh gọi lại không bắt buộc với 2 tham số:

  • Số byte hiện tại mà ứng dụng đang dùng.
  • Số byte còn lại trong hạn mức.

• errorCallback: Lệnh gọi lại lỗi không bắt buộc.

requestQuota

Hãy yêu cầu thêm dung lượng. Trình duyệt sẽ hiển thị một thanh thông tin để nhắc người dùng cấp hoặc từ chối quyền cho ứng dụng có thêm bộ nhớ.

 // you could also use it from webkitTemporaryStorage
navigator.webkitPersistentStorage.requestQuota (
      newQuotaInBytes,
      quotaCallback,
      errorCallback);

Các tham số

• newQuotaInBytes: Số lượng byte bạn muốn trong hạn mức bộ nhớ của mình.
• successCallback: Lệnh gọi lại không bắt buộc truyền số byte đã cấp.
• errorCallback: Lệnh gọi lại lỗi không bắt buộc.

Phát triển trong tương lai

Theo kế hoạch, hãy đặt tất cả các API lưu trữ ngoại tuyến HTML5 (bao gồm cả IndexedDB, Application Cache, File System và các API khác có thể được chỉ định — trong API Quản lý hạn mức. Bạn sẽ có thể quản lý toàn bộ quá trình phân bổ bộ nhớ thông qua dịch vụ này.