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

HTML5 đã ra mắt 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. Tuy nhiên, theo mặc định, dung lượng được phân bổ cho mỗi ứng dụng sẽ bị giới hạn ở một vài megabyte. Google Chrome cho phép bạn yêu cầu tăng hạn mức bộ nhớ, vượt quá giới hạn trước đó là 5 MB.

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 sử 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. Chiến lược phát hành đĩa đơn tài liệu 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 các API ngoại tuyến.

Nội dung

  1. Các loại bộ nhớ
    1. Tạm thời
    2. Ổn đị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
    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 hình lưu trữ

Trong Google Chrome, bạn có thể yêu cầu cấp 3 loại hình lưu trữ:

Những loại hình lưu trữ 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 hình khác trong bảng dưới đây.

Bộ nhớ tạm thời

Bộ nhớ tạm thời là bộ nhớ tạm thời mà mọi ứng dụng web đều có thể sử dụng. Chrome sẽ tự động cấp bộ nhớ tạm thời của ứng dụng, vì vậy, bạn không cần yêu cầu phân bổ.

Chia sẻ nhóm

Bộ nhớ tạm thời được dùng chung cho 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 đến 1/3 dung lượng ổ đĩa hiện có. Dung lượng lưu trữ mà các ứng dụng đã dùng là được bao gồm trong tính toán nhóm dùng chung; tức là, kết quả tính toán 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% bộ nhớ dùng chung. Ví dụ: nếu tổng dung lượng ổ đĩa trống là 60 GB, bộ nhớ gộp dùng chung là 20 GB và ứng dụng có thể có dung lượng tối đa 4 GB. Tỷ lệ này được tính từ 20% (lên đến 4 GB) trong số 1/3 (lên đến 20 GB) dung lượng ổ đĩa có sẵn (60 GB).

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

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

Hết bộ nhớ

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ữ trong máy chủ lưu trữ bạn sử dụng gần đây sẽ bị xoá. Tuy nhiên, trình duyệt sẽ không xoá dữ liệu trong LocalStorage và Bộ nhớ phiên. Đố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ộ dữ liệu chứ không xoá để dữ liệu ứng dụng không bị hỏng theo những cách ngoài dự kiến.

Vì mỗi ứng dụng bị giới hạn tối đa là 20% bộ nhớ gộp, nên người dùng chỉ có thể xoá ứng dụng đang chạy nhiều hơn năm ứng dụng ngoại tuyến, mỗi ứng dụng này đều sử dụng bộ nhớ tối đa.

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

Bộ nhớ liên tục

Bộ nhớ liên tục là bộ nhớ nằm trong trình duyệt trừ khi người dùng dọn sạch bộ nhớ đó. Có sẵn 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 chẳng hạn như IndexedDB và Bộ nhớ đệm của ứng dụng.

Một ứng dụng có thể có hạn mức bộ nhớ liên tục 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 API Quản lý hạn mức và người dùng phải cấp cho bạn quyền sử dụng thêm . Chrome hiển thị thanh thông tin để nhắc người dùng cấp thêm dung lượng bộ nhớ 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 cũng tương tự như bộ nhớ liên tục, nhưng chỉ dành cho ứng dụng Chrome và (tệp .crx). Dung lượng lưu trữ 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. Tại thời điểm cài đặt, người dùng được thông báo về các quyền mà ứng dụng hoặc tiện ích. 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 dành cho nhà phát triển đối với ứng dụngtiệ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ớ.

 Bộ nhớ tạm thờiBộ nhớ liên tụcKhông gian lưu trữ không giới hạn
Mô tả cơ bản

Bộ nhớ tạm thời dành cho bất kỳ ứng dụng web nào.

Việc này là tự động và không cần phải yêu cầu.

Bộ nhớ vĩnh viễn phải được yêu cầu thông qua API Quản lý hạn mức và do người dùng cấp.

Bộ nhớ vĩnh viễn cho các ứng dụng và tiện ích của Chrome.

Mã này được đặt trong tệp kê khai và phải được người dùng cấp.

Phạm vi cung cấp

Tất cả ứng dụng web.

Tất cả ứng dụng web.Dành riêng cho các tiện ích của Chrome cũng như các ứng dụng web được lưu trữ và cài đặt.
QuyềnKhông có. Bạn có thể sử dụng hàm này mà không cần yêu cầu rõ ràng.

Bạn phải yêu cầu thêm dung lượng lưu trữ bằng API Quản lý hạn mức.

Bạn có thể yêu cầu quyền unlimitedStorage trong tệp kê khai cho ứng dụng hoặc tiện ích.
Trải nghiệm người dùng trong lần sử dụng đầu tiênẨn với người dùng. Ứng dụng chỉ chạy.

Chrome sẽ hiển thị thanh thông tin nhắc người dùng chấp nhận hoặc từ chối yêu cầu tăng dung lượng bộ nhớ.

Tuy nhiên, nếu hạn mức bạn yêu cầu thực sự 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 hiển thị. Hạn mức lớn hơn sẽ được giữ lại.

Tại thời điểm cài đặt, người dùng sẽ được thông báo về các quyền mà ứng dụng hoặc tiện ích yêu cầu. Khi 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 cho ứng dụng hoặc tiện ích.

Trải nghiệm người dùng ở các yêu cầu tăng bộ nhớ tiếp theoKhông áp dụng. Bạn không thể yêu cầu thêm bộ nhớ tạm thời.

Chrome sẽ nhắc người dùng một lần nữa.

 

Chrome không nhắc người dùng sau khi cài đặt, bất kể ứng dụng hoặc tiện ích có yêu cầu tăng hạn mức hay không.
Khả năng lưu trữ cố định dữ liệu

Tạm thời. Trình duyệt có thể xoá dữ liệu.

Liên tục. Trình duyệt sẽ không xoá dữ liệu trừ phi người dùng yêu cầu xoá. Dữ liệu sẽ có trong những lần truy cập tiếp theo.

Đừng giả định rằng dữ liệu đó là vĩnh viễn vì người dùng có thể xoá dữ liệu đó.

Tương tự như bộ nhớ liên tục.

 

Không gian lưu trữ mặc định

Tối đa 20% bộ nhớ dùng chung.

0 MB. Bạn phải yêu cầu rõ ràng một dung lượng lưu trữ cụ thể.

0 MB. Bạn phải yêu cầu rõ ràng về unlimitedStorage trong tệp kê khai.

Nếu bạn không chỉ định các yêu cầu về bộ nhớ, Chrome sẽ phân bổ bộ nhớ cho ứng dụng từ bộ nhớ tạm thời dùng chung.

Không gian lưu trữ tối đaTối đa 20% bộ nhớ dùng chung.Lớn bằng dung lượng còn trống trên ổ đĩa cứng. Bộ nhớ này không có bộ nhớ cố định.Lớn bằng dung lượng còn trống trên ổ đĩa cứng.
Trường hợp sử dụng được đề xuấtLưu vào bộ nhớ đệm.Ứng dụng hoạt động khi không có mạng hoặc có số lượng lớn thành phần.Các ứng dụng được thiết kế để chạy trong Google Chrome.
Các API có thể dùng

API ngoại tuyến

  • Bộ nhớ đệm của ứng dụng
  • Hệ thống tệp
  • IndexedDB
  • WebSQL (không dùng nữa kể từ ngày 18 tháng 11 năm 2010)

Lưu ý: Các API lưu trữ trên web như LocalStorage và SessionStorage vẫn có kích thước cố định là 5 MB.

API hệ thống tệp

API ngoại tuyến

  • Bộ nhớ đệm của ứng dụng
  • Hệ thống tệp
  • IndexedDB
  • WebSQL (không dùng nữa)

Lưu ý: Các API lưu trữ trên web như LocalStorage và SessionStorage vẫn có kích thước cố định là 5 MB.

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

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

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

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

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

Để truy vấn kích thước 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() với:

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

Mức sử dụng do 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ể diễn ra trễ, dẫn đến 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 hỏi về trạng thái của bộ nhớ liên tục, bạn chỉ cần thay thế webkitStorageInfo.TEMPORARY cho thành viên webkitStorageInfo.PERSISTENT. Enum cũng nằm trong window (không gian tên chung), vì vậy, bạn cũng có thể sử dụng window.PERSISTENTwindow.TEMPORARY.

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

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

Để có bộ nhớ 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 thể hiện rõ yêu cầu bộ nhớ cho ứng dụng của bạn. Gọi requestQuota() bằng:

  • Loại hình lưu trữ
  • 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 điều 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ể được tự động đưa ra bị từ chối 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 hiển thị.
  • Nếu yêu cầu bộ nhớ lớn hơn 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, bạn không cần gọi lại phương thức này.

Sau đây là cách bạn có thể 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 cho hoạt động kiểm thử

Khi thử nghiệm bộ nhớ trong ứng dụng, có thể bạn muốn xoá dữ liệu đã lưu trữ để có thể kiểm thử làm mới quản lý hạn mức trong ứng dụng của bạn. 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 vùng chọn đã đá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 hình lưu trữ.

Hằng sốGiá trịMô tả
TEMPORARY0Bộ nhớ tạm thời.
PERSISTENT1Bộ nhớ liên tục.

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

queryUsageAndQuota
requestQuota

Phương thức

queryUsageAndQuota

Kiểm tra kích thước 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 có 2 tham số:

    • Số byte hiện tại mà ứng dụng đang sử 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 bộ nhớ. Trình duyệt hiển thị thanh thông tin để nhắc người dùng cấp hoặc từ chối ứng dụng có thêm bộ nhớ.

 // you could also use it from webkitTemporaryStorage
navigator.webkitPersistentStorage.requestQuota (
      newQuotaInBytes,
      quotaCallback,
      errorCallback);
Tham số
  • newQuotaInBytes: Dung lượng byte bạn muốn thêm vào 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

Kế hoạch là đặt tất cả các API lưu trữ ngoại tuyến HTML5—bao gồm IndexedDB, Bộ nhớ đệm ứng dụng, Tệp Hệ thống và các API khác có thể được chỉ định theo Hạn mức API Quản lý. Bạn sẽ có thể quản lý tất cả mức phân bổ bộ nhớ bằng công cụ này.