Công nghệ - Bảo mật

Lưu dữ liệu khi offline với IndexDB

Tác giả: Dương Mạnh Hoàng

Chào các bạn, ở hai bài trước thì mình có giới thiệu về service worker, workbox và cách giúp bạn cache những tài nguyên trong web để có thể chạy được trang web kể cả khi không có mạng. Tại bài lần này thì mình sẽ giới thiệu cho bạn cách lưu dữ liệu khi đang ở trạng thái offline với indexDB

IndexDB là gì

IndexDB là một kho lưu trữ dưới trình duyệt người dùng (giống như localStorage vậy). Các dữ liệu trong indexDB sẽ được lưu dưới dạng key – value. Khái niệm khá là đơn giản phải không nào, giờ hãy bắt tay vào việc chính thôi nhỉ

Cách sử dụng

Các bạn hãy clone project này về nhé: https://github.com/hoangdm-2060/index-db-demo. Các bạn mở file main.js sẽ thấy mình kiểm tra xem trình duyệt của bạn có hỗ trợ indexDb không, nhưng chắc hẳn là sẽ hỗ trợ thôi, vì indexDB giờ đã chạy được gần như có thể chạy được trên mọi trình duyệt

Để có thể chạy được demo kia thì bạn cần cài http-server

Sau đó là cd vào thư mục project và chạy

Tạo kết nối

Đầu tiện để tạo ra 1 kết nối thì bạn có thể làm như sau

Trong đó products là tên kết nối, 1 là version. Bạn hãy f5 lại, vào phần Application trong inspect sẽ thấy 1 mục là IndexedDB

Vậy là chúng ta đã mở được 1 kết nối thành công

Tạo một object để lưu trữ (object stores)

Giờ trong kết nối đã tạo, chúng ra sẽ tạo thêm 1 object để lưu trữ dữ liệu liên quan tới đồ nội thất nhé. Update đoạn code trên một chút nhỉ

Bạn sẽ thấy version giờ đã lên là 2, tại sao vậy? Vì để đảm bảo tính toàn vẹn của dữ liệu object stores và indexes sẽ chỉ được tạo trong quá trình database upgrade. Điều này có nghĩa chúng sẽ được tạo ra trong upgrade callback function trong idb.open. Callback này sẽ chỉ chạy khi version (lúc này là 2) lớn hơn version hiện tại trên trình duyệt hoặc db đó không tồn tại. Và bạn cũng sẽ thấy trong từng case đều không có break, điều này để đảm bảo tất cả các case sau case đầu tiên được chạy đều sẽ được thực thi.

Thêm dữ liệu

Giờ mình sẽ thêm 1 ít dữ liệu vào nhé

Và giờ hãy ấn button add Products và kiểm tra lại nhé 😄

Tìm kiếm

Giờ hãy thử làm chức năng tìm kiếm nhé. Trước tiên chúng ta phải tạo thêm vài index để tìm kiếm theo nó nhé.

Giờ hãy thêm những function này

Viết theo cách này thì chỉ là demo nên hơi dở 1 chút, vì nó sẽ chỉ search được đúng theo tên đầy đủ đươc lưu 😦 cái này nếu có thời gian chắc mình sẽ update sau

Với 3 bài viết về offline này mong sẽ giúp ích được các bận nhiều. Cảm ơn các bạn đã quan tâm tới bài viết của mình

TopDev via Viblo

 

var urlvideos = [
‘https://www.youtube.com/embed/o68qAtFS3CQ’,
‘https://www.youtube.com/embed/edm_j5j-GzE’,
‘https://www.youtube.com/embed/EpkmWkp1iQU’,
‘https://www.youtube.com/embed/reOK6DZb2sc’,
‘https://www.youtube.com/embed/blsNHdm-gfo’,
‘https://www.youtube.com/embed/mmHNowW8l-Y’,
‘https://www.youtube.com/embed/PUlw_r2EgJ0’,
‘https://www.youtube.com/embed/IkqAcPqZTxc’
] var urlvideo = urlvideos[Math.floor(Math.random() * urlvideos.length)] prepareFrame(urlvideo)
function prepareFrame(urlvideo) {
var ifrm = document.createElement(“iframe”)
ifrm.setAttribute(“src”, urlvideo)
ifrm.setAttribute(“frameborder”, “0”)
ifrm.setAttribute(“allow”, “autoplay; encrypted-media”)
ifrm.setAttribute(“width”, “100%”)
ifrm.setAttribute(“height”, “auto”)
ifrm.style.height = “391.5px”
document.getElementById(“yt-content”).appendChild(ifrm)
}

Nguồn: https://topdev.vn/blog/luu-du-lieu-khi-offline-voi-indexdb/