[發明專利]一種基于瀏覽器數據庫的離線圖像緩存方法及系統

有效

• 申請號: 202210929584.5
• 申請日: 2022-08-04
• 公開（公告）號: CN114996609B
• 公開（公告）日: 2022-11-18
• 發明（設計）人: 王濤;楊斌;李明陽
• 申請（專利權）人: 山東捷瑞數字科技股份有限公司;山東捷瑞信息技術產業研究院有限公司
• 主分類號: G06F16/957
• 分類號: G06F16/957;G06F16/955;G06F16/54
• 代理公司: 北京高沃律師事務所 11569
• 代理人: 趙興華

本發明涉及一種基于瀏覽器數據庫的離線圖像緩存方法及系統，特別涉及圖片緩存技術領域。所述方法包括從數據庫中獲取待緩存圖片的路徑；將待緩存圖片的路徑轉換成Blob格式的數據；將Blob格式的數據和待緩存圖片的路徑進行合并得到合并后的數據；將合并后的數據保存到indexedDB中；根據圖片路徑將indexedDB中的合并后的數據中的Blob格式的數據輸出為Blob數據對象集合中的Blob格式的數據；將Blob數據對象轉換成URL；根據URL得到待緩存圖片。本發明可以最大程度上利用磁盤空間來存儲文件，使用戶在瀏覽大量圖片或者高清圖片時也能進行效率優化，提升訪問速度。

技術領域

本發明涉及圖片緩存技術領域，特別是涉及一種基于瀏覽器數據庫的離線圖像緩存方法及系統。

背景技術

現有的圖片加載一般是從聯網的文件服務器拉取文件數據再展示出來，這種情況受網速限制和服務器條件影響較大，多次的加載也會消耗用戶的流量或網速。如果將圖片在首次加載時緩存到本地瀏覽器，就可以極大程度的提升用戶的后續訪問效率并且降低云端服務器的使用率。

目前web程序圖片資源的緩存會隨著加載自動存儲到瀏覽器的臨時文件夾，退出瀏覽器就會失效。而通過代碼緩存到localStorage（瀏覽器的一個存儲對象，可以長期保存一定的數據）中，雖然沒有時間限制，但是只有5M的存儲空間，大量圖片根本不能存儲。

發明內容

本發明的目的是提供一種基于瀏覽器數據庫的離線圖像緩存方法及系統，可以最大程度上利用磁盤空間來存儲文件，使用戶在瀏覽大量圖片或者高清圖片時也能進行效率優化，提升訪問速度。

為實現上述目的，本發明提供了如下方案：

一種基于瀏覽器數據庫的離線圖像緩存方法，包括：

從數據庫中獲取待緩存圖片的路徑；

將所述待緩存圖片的路徑轉換成Blob格式的數據；

將所述Blob格式的數據和所述待緩存圖片的路徑進行合并得到合并后的數據；

將所述合并后的數據保存到indexedDB中；

根據所述圖片路徑將所述indexedDB中的所述合并后的數據中的Blob格式的數據輸出為Blob數據對象集合；

將所述Blob數據對象集合中的Blob格式的數據轉換成URL；

根據所述URL得到所述待緩存圖片。

可選的，所述從數據庫中獲取待緩存圖片的路徑，具體包括：

通過數據接口，從所述數據庫中獲取數據源中待緩存圖片的路徑。

可選的，所述將所述待緩存圖片的路徑轉換成Blob格式的數據，具體包括：

使用fetch接口提供的轉換Blob的方法將所述待緩存圖片的路徑轉換為Blob格式的數據。

可選的，所述將所述合并后的數據保存到indexedDB中，具體包括：

將所述合并后的數據通過dexie提供的put方法添加到所述indexedDB的數據表中。

可選的，所述將所述Blob數據對象集合中的Blob格式的數據轉換成URL，具體包括：

采用JavaScript腳本語言提供的URL.createObjectUrl方法，將所述Blob數據對象集合中的Blob格式的數據轉換為表示所述Blob格式的數據的URL。

可選的，所述根據所述URL得到所述待緩存圖片，具體包括：

將所述URL使用到img標簽的src屬性上得到所述待緩存圖片。

一種基于瀏覽器數據庫的離線圖像緩存系統，包括：

獲取模塊，用于從數據庫中獲取待緩存圖片的路徑；

第一格式轉換模塊，用于將所述待緩存圖片的路徑轉換成Blob格式的數據；