★AppGiaiTri.com Đăng nhập
Công nghệ đằng sau

Dữ liệu ứng dụng web lưu ở đâu: cookie, localStorage, IndexedDB và lúc bị xoá

Ứng dụng web lưu dữ liệu ngay trong trình duyệt, mỗi trang một ngăn riêng. Đổi trình duyệt, tab ẩn danh, máy đầy bộ nhớ hay Safari dọn sau 7 ngày đều có thể làm mất.

Dữ liệu ứng dụng web lưu ở đâu: cookie, localStorage, IndexedDB và lúc bị xoá

Ứng dụng web lưu dữ liệu ở ba chỗ chính ngay trong trình duyệt của bạn: cookie, localStorage và IndexedDB. Cả ba thuộc về đúng một trang và một trình duyệt, nên đổi trình duyệt, dùng tab ẩn danh hay bấm “xoá dữ liệu duyệt web” đều có thể làm mất phần lưu trên máy. Thứ duy nhất sống sót qua mọi chuyện đó là dữ liệu đã gửi lên máy chủ và gắn với tài khoản. Bài này giải thích từng ngăn chứa, ai được mở nó, và những lúc trình duyệt tự dọn mà bạn không hay.

Ba ngăn tủ trong một trình duyệt

Hãy hình dung mỗi trang web được trình duyệt cấp cho một ngăn tủ riêng. Trong ngăn đó có ba loại hộp, mỗi loại hợp một việc.

Ngăn chứaGiống cái gìDung lượngThường dùng cho
CookieTấm thẻ ra vào, tự động trình ra mỗi lần đi qua cổngRất nhỏ, khoảng vài nghìn ký tự mỗi thẻGiữ trạng thái đăng nhập, ghi nhớ phiên làm việc
localStorageCuốn sổ tay ghi “tên — giá trị”Vài megabyte mỗi trang, tuỳ trình duyệtCài đặt nhỏ: âm lượng, ngôn ngữ, chế độ hiệu ứng thấp
IndexedDBMột tủ hồ sơ có ngăn kéo, có mục lụcLớn hơn nhiều, tính theo phần trăm dung lượng trống của máyDữ liệu có cấu trúc: tiến trình, bản ghi lượt chơi chờ gửi, hình ảnh tạo trên máy

Ngoài ba hộp này còn có kho của service worker, nơi cất tệp mã và hình ảnh để ứng dụng mở được khi mất mạng. Kho đó chứa “bộ khung” của ứng dụng chứ không chứa dữ liệu của bạn; chúng tôi đã có bài riêng về nó.

Cookie khác hai hộp kia ở điểm nào

Cookie là hộp duy nhất tự đi theo mỗi yêu cầu gửi lên máy chủ. Vì thế nó hợp để chứng minh “tôi là người đã đăng nhập”, nhưng không hợp để chứa nhiều thứ — mọi chữ trong cookie đều bị gửi đi gửi lại, tốn băng thông. Cookie đăng nhập làm cẩn thận còn được đánh dấu để mã chạy trong trang không đọc được nó, chỉ trình duyệt và máy chủ trao tay nhau. Nhờ vậy, kể cả khi trang có lỗ hổng, kẻ xấu khó lấy trộm phiên đăng nhập.

localStorage: tiện nhưng chậm nếu dùng sai

localStorage cực kỳ dễ dùng: một dòng mã để ghi, một dòng để đọc. Cái giá là nó đồng bộ — khi đang đọc ghi, mọi việc khác trên trang phải đứng chờ. Ghi vài con số thì không ai nhận ra. Ghi cả một bản đồ hay danh sách nghìn dòng mỗi khung hình thì hình sẽ khựng. Đó là lý do người làm cẩn thận chỉ để cài đặt nhỏ trong localStorage, còn dữ liệu lớn để IndexedDB lo.

IndexedDB: tủ hồ sơ làm việc ở hậu trường

IndexedDB là một cơ sở dữ liệu thu nhỏ bên trong trình duyệt. Nó làm việc không đồng bộ: trang gửi yêu cầu rồi đi làm việc khác, có kết quả thì được báo lại. Nó chứa được cả hình ảnh, âm thanh dạng tệp, và tìm theo mục lục nhanh. Đổi lại, cách viết mã phức tạp hơn hẳn, nên nhiều ứng dụng nhỏ không dùng tới.

Ai được mở ngăn tủ của ai

Luật gốc của trình duyệt gọi là cùng nguồn gốc: một ngăn tủ chỉ mở được bởi đúng trang có cùng giao thức, cùng tên miền và cùng cổng. Trang a.com không đọc được localStorage của b.com, dù hai trang mở cạnh nhau trong hai tab. Ngay cả a.com và sub.a.com cũng là hai ngăn tủ khác nhau với localStorage và IndexedDB.

Từ luật này suy ra vài điều hay gây bối rối:

  • Đổi trình duyệt là đổi tủ. Dữ liệu trong Chrome không sang Safari, không sang trình duyệt dựng sẵn trong Zalo hay Facebook. Mở cùng một đường dẫn ở ba nơi là ba ngăn tủ trống khác nhau.
  • Ứng dụng đã thêm ra màn hình chính có thể có tủ riêng. Trên iPhone, biểu tượng thêm vào màn hình chính thường không chung dữ liệu với tab Safari của cùng trang. Đăng nhập trong Safari xong, mở biểu tượng vẫn có thể phải đăng nhập lại.
  • Tab ẩn danh là tủ dùng một lần. Đóng hết cửa sổ ẩn danh là cả ngăn tủ bị huỷ.

Những lúc trình duyệt tự dọn tủ

Đây là phần ít người biết nhất. Dữ liệu trên máy không vĩnh viễn, kể cả khi bạn không bấm xoá gì.

  1. Bạn xoá dữ liệu duyệt web. Chọn xoá “cookie và dữ liệu trang web” là cả ba hộp của mọi trang cùng đi. Chỉ xoá “lịch sử” thì thường không đụng tới, nhưng tuỳ trình duyệt mà các lựa chọn gộp chung với nhau.
  2. Máy sắp hết bộ nhớ. Dữ liệu trang web mặc định thuộc loại “có thể dọn khi cần”. Khi ổ đầy, trình duyệt xoá bớt, thường bắt đầu từ trang lâu không mở nhất, và xoá trọn ngăn tủ của trang đó chứ không xoá lưng chừng.
  3. Safari dọn trang lâu không ghé. Từ năm 2020, WebKit (bộ máy của Safari và mọi trình duyệt trên iPhone) xoá dữ liệu do mã trang ghi ra — localStorage, IndexedDB, kho service worker — nếu bạn dùng Safari suốt bảy ngày mà không hề tương tác với trang đó. Ứng dụng đã thêm ra màn hình chính được tính riêng và không bị luật này đụng tới theo cách như trên tab thường.
  4. Ứng dụng tự đổi định dạng dữ liệu. Khi người làm thay cách lưu, bản cũ có thể bị bỏ qua hoặc chuyển đổi. Ứng dụng làm cẩn thận sẽ chuyển đổi chứ không âm thầm xoá.

Trang web có thể xin trình duyệt đánh dấu ngăn tủ là lưu bền, tức là không tự dọn khi thiếu chỗ. Trình duyệt quyết định có đồng ý hay không, thường dựa vào việc bạn có hay mở trang, có thêm ra màn hình chính hay không. Không trang nào ép được.

Xem trang nào đang chiếm bao nhiêu chỗ

Bạn tự kiểm được, không cần biết lập trình. Tên mục có thể khác tuỳ phiên bản máy và trình duyệt.

  • Chrome trên Android: mở Chrome, bấm dấu ba chấm, vào Cài đặt → Cài đặt trang web → Bộ nhớ trên thiết bị (hoặc Dữ liệu được lưu trữ). Danh sách hiện từng trang kèm dung lượng; bấm vào một trang để xoá riêng trang đó.
  • Safari trên iPhone: vào Cài đặt → Ứng dụng → Safari → Nâng cao → Dữ liệu trang web. Vuốt sang trái trên một dòng để xoá riêng trang đó, thay vì xoá sạch tất cả.
  • Chrome trên máy tính: bấm biểu tượng bên trái thanh địa chỉ → Cài đặt trang web, mục dung lượng hiện ngay đầu; có nút xoá dữ liệu cho riêng trang đang mở.

Xoá riêng một trang là cách sửa lỗi “kẹt” an toàn hơn nhiều so với xoá toàn bộ, vì các trang khác vẫn giữ nguyên đăng nhập.

Cách giữ tiến trình không mất

Nguyên tắc ngắn gọn: thứ gì quý thì phải có bản trên máy chủ. Ngăn tủ trong trình duyệt chỉ là chỗ để tạm cho nhanh.

Tình huốngNên làm
Ứng dụng có tài khoảnĐăng nhập trước khi dùng lâu. Tiến trình gắn tài khoản thì đổi máy, đổi trình duyệt vẫn còn
Hay mở link từ Zalo, MessengerChọn “mở bằng trình duyệt” rồi dùng cố định một trình duyệt, đừng lúc trong Zalo lúc ngoài
Dùng iPhone, cách vài tuần mới mởThêm ứng dụng ra màn hình chính và đăng nhập trong đó
Máy hay báo đầy bộ nhớDọn ảnh, video trước; đừng để trình duyệt phải tự chọn xoá gì
Cho bé dùng máy của bố mẹĐừng mở tab ẩn danh cho bé — đóng lại là mất hết những gì bé làm

Với các ứng dụng của AppGiaiTri, một tài khoản dùng chung cho mọi ứng dụng, Giao Đấu, Đội Hình hay Rượt Đuổi đều dùng cùng một tài khoản đó; đổi máy chỉ cần đăng nhập lại là tiến trình gắn tài khoản đi theo. Những cài đặt nhỏ chỉ nằm trên máy thì đổi máy phải chỉnh lại — chuyện bình thường của mọi ứng dụng web, và cũng hợp lý vì loa điện thoại với loa máy tính bảng vốn cần mức âm lượng khác nhau.

Dữ liệu trên máy và quyền riêng tư

Mặt tốt của việc lưu trên máy là dữ liệu không rời khỏi tay bạn. Một ứng dụng chỉ nhớ âm lượng và chế độ hiệu ứng thì không có lý do gửi chúng lên đâu cả. Mặt cần để ý là máy dùng chung: ai cầm máy cũng thấy đúng những gì trang đã nhớ. Trên máy của cả nhà, hãy đăng xuất ở ứng dụng có thông tin cá nhân sau khi dùng; đăng xuất đúng cách sẽ xoá cookie phiên và những gì gắn với tài khoản trên máy.

Người làm ứng dụng cũng có phần trách nhiệm: không cất mật khẩu hay mã đăng nhập dài hạn vào localStorage, vì mọi đoạn mã chạy trong trang đều đọc được hộp đó. Thứ nhạy cảm nên nằm trong cookie được khoá khỏi mã trang, hoặc không nằm trên máy chút nào.

Câu hỏi thường gặp

Xoá lịch sử duyệt web có làm mất tiến trình ứng dụng web không?

Chỉ xoá lịch sử thì thường không. Nhưng nếu đánh dấu cả “cookie và dữ liệu trang web” thì mọi dữ liệu trang lưu trên máy sẽ mất, kể cả đăng nhập. Tiến trình đã gắn với tài khoản trên máy chủ thì vẫn còn, chỉ cần đăng nhập lại.

Vì sao mở link trong Zalo thì mất dữ liệu đã có trong Chrome?

Trình duyệt dựng sẵn trong Zalo, Facebook hay Messenger là một trình duyệt khác với ngăn tủ riêng. Dữ liệu không chảy qua lại giữa chúng. Hãy chọn mở bằng trình duyệt quen dùng để mọi thứ nằm một chỗ.

localStorage chứa được bao nhiêu?

Thường khoảng vài megabyte cho mỗi trang, con số cụ thể tuỳ trình duyệt. Đủ cho cài đặt và vài danh sách nhỏ, không đủ cho hình ảnh hay dữ liệu lớn; những thứ đó nên để IndexedDB.

Ứng dụng thêm ra màn hình chính có giữ dữ liệu lâu hơn không?

Trên iPhone thì có: luật tự xoá sau bảy ngày không tương tác của Safari không áp như với tab thường. Tuy vậy, nếu máy thiếu bộ nhớ hay bạn xoá dữ liệu trang web, phần lưu trên máy vẫn có thể mất.

Trang web có đọc được dữ liệu của trang khác trên máy tôi không?

Không, theo luật cùng nguồn gốc của trình duyệt, mỗi trang chỉ mở được ngăn tủ của chính nó. Trường hợp ngoại lệ là tiện ích mở rộng được bạn cấp quyền đọc mọi trang, nên chỉ cài tiện ích từ nguồn tin cậy.

Có cách nào sao lưu dữ liệu ứng dụng web không?

Cách chắc nhất là đăng nhập để dữ liệu nằm trên máy chủ. Sao lưu điện thoại có thể chứa dữ liệu trình duyệt, nhưng khôi phục từng trang riêng lẻ thì không đáng tin, đừng trông vào đó.

Cần tư vấn cụ thể cho trường hợp của bạn?

Chúng tôi sẽ liên hệ trong vòng 24 giờ.

Đăng ký tư vấn ngay

Bài viết liên quan

Bạn cần hỗ trợ thêm?

Để lại thông tin, chúng tôi sẽ liên hệ trong 24 giờ.