本發(fā)明涉及靜態(tài)資源的緩存方法，更具體地說是指基于Localstroage的靜態(tài)資源的緩存方法及緩存系統(tǒng)。

背景技術(shù)：

Localstroage為HTML5本地存儲web storage特性的API之一，主要作用是將數(shù)據(jù)保存在客戶端中，而客戶端一般是指上海網(wǎng)站設(shè)計用戶的計算機。在移動設(shè)備上，由于大部分瀏覽器都支持web storage特性，因此在android和ios等智能手機上的web瀏覽器都能正常使用該特性。Cookie實際上是一小段的文本信息，客戶端請求服務(wù)器，如果服務(wù)器需要記錄該用戶狀態(tài)，就使用response向客戶端瀏覽器頒發(fā)一個Cookie，客戶端瀏覽器會把Cookie保存起來，當(dāng)瀏覽器再請求該網(wǎng)站時，瀏覽器把請求的網(wǎng)址連同該Cookie一同提交給服務(wù)器，服務(wù)器檢查該Cookie，以此來辨認用戶狀態(tài)，服務(wù)器還可以根據(jù)需要修改Cookie的內(nèi)容。通常需要SEO，導(dǎo)致css不能緩存，僅緩存js使得整個緩存方案意義減小，在pc端中兼容性不太好，不支持LS的瀏覽器比例仍然很大，網(wǎng)絡(luò)速度快，協(xié)商緩存響應(yīng)快，Localstroage讀取+eval很多時候會比不上304(未修改，自從上次請求后，請求的網(wǎng)頁未修改過)。

在頁面渲染之后，需要讀取Localstroage中緩存內(nèi)容，如果有一個資源更新，那么就需要整個頁面的資源代碼重新下發(fā)，所以往往每周上線的時候會引起頁面性能數(shù)據(jù)抖動。任何在該域內(nèi)的所有頁面，都可以訪問Localstroage數(shù)據(jù)，但各個瀏覽器廠商的瀏覽器之間的數(shù)據(jù)是各自獨立的，如果在firefox中使用Localstroage存儲一組數(shù)據(jù)，在chrome瀏覽器下是無法讀取的，同樣，由于Localstroage數(shù)據(jù)是保存在用戶的設(shè)備中的，同一個應(yīng)用程序在不同設(shè)備上保存的數(shù)據(jù)是不同的。

中國專利201410003001.1公開一種頁面資源的加載方法及裝置，涉及信息技術(shù)領(lǐng)域，可以避免針對同一資源重復(fù)向網(wǎng)絡(luò)服務(wù)器發(fā)送資源請求，減少網(wǎng)絡(luò)資源的浪費。所述方法包括：首先啟動頁面解析線程，然后判斷本地離線應(yīng)用緩存中是否緩存有所述頁面中需要加載的資源，所述本地離線應(yīng)用緩存中緩存有通過解析manifest文件獲取的資源，若所述本地離線應(yīng)用緩存中緩存有所述頁面中需要加載的資源，則從所述本地離線應(yīng)用緩存中讀取所述頁面中需要加載的資源。

上述的專利并沒有指出數(shù)據(jù)更新時，如何進行選擇靜態(tài)資源的緩存或者資源更新。

因此，有必要設(shè)計一種靜態(tài)資源的緩存方法，實現(xiàn)在移動端WebApp不需要seo，數(shù)據(jù)也能緩存加載，Localstroage被清理的幾率低，存儲空間大，安全性高。

技術(shù)實現(xiàn)要素：

本發(fā)明的目的在于克服現(xiàn)有技術(shù)的缺陷，提供基于Localstroage的靜態(tài)資源的緩存方法及其系統(tǒng)。

為實現(xiàn)上述目的，本發(fā)明采用以下技術(shù)方案：基于Localstroage的靜態(tài)資源的緩存方法，包括以下具體步驟：

步驟一、源碼保存步驟，頁面初次加載時，將頁面的代碼保存到Localstroage中；

步驟二、版本號保存步驟，在整個頁面上利用cookie保存一個版本號信息，并存儲一個MD5的版本號；

步驟三、對比判斷步驟，第二次訪問頁面，引入版本號信息，將當(dāng)前頁面的文件版本號與步驟二中的版本號對比，判斷代碼是否更新，當(dāng)代碼更新時，執(zhí)行步驟四，當(dāng)代碼無更新時，執(zhí)行步驟五；

步驟四、代碼更新步驟，重新下發(fā)有變更的代碼，并將當(dāng)前的代碼重新保存到Localstroage內(nèi)，覆蓋原先的數(shù)據(jù)，更新版本號，得到一個新的版本號；

步驟五、代碼執(zhí)行步驟，解析本地Localstroage并讀取代碼，執(zhí)行下發(fā)代碼；

步驟六、結(jié)束步驟，重復(fù)步驟三，直至頁面不再加載。

其進一步技術(shù)方案為：所述步驟一中，頁面初次加載時，需要進行嵌標(biāo)簽步驟，先將頁面中的js和css嵌入script和style標(biāo)簽，以此把代碼存入Localstroage中。

其進一步技術(shù)方案為：所述步驟三中，引入的版本號信息為版本號信息中的config.js。

其進一步技術(shù)方案為：所述步驟四中，在進行重新下發(fā)有變更的代碼時，需要進行緩存代碼分層步驟，將需要緩存的代碼分為通用代碼以及業(yè)務(wù)代碼。

其進一步技術(shù)方案為：所述步驟四中，更新版本號的具體步驟如下：

步驟1、第一判斷步驟，進入頁面后，判斷頁面中是否存在緩存版本的cookie，若頁面中存在緩存版本的cookie，則執(zhí)行步驟2，若頁面中不存在緩存版本的cookie，則執(zhí)行步驟5；

步驟2、第二判斷步驟，判斷cookie中版本是否為最新版本，當(dāng)cookie中存在過期版本時，執(zhí)行步驟3，當(dāng)cookie的版本為最新版本時，執(zhí)行步驟4；

步驟3、第一執(zhí)行步驟，下發(fā)過期代碼后，執(zhí)行代碼并將代碼存入到Localstroage，同時重新設(shè)置cookie后，執(zhí)行步驟6；

步驟4、第二執(zhí)行步驟，cookie中的代碼不會下發(fā)，同時執(zhí)行存在Localstroage中的代碼；

步驟5、第三執(zhí)行步驟，全量下發(fā)cookie的版本信息，執(zhí)行代碼并將代碼存入到Localstroage，同時重新設(shè)置cookie后，執(zhí)行步驟6；

步驟6、結(jié)束步驟，重復(fù)步驟1，直至不再進入頁面。

本發(fā)明還提供了基于Localstroage的靜態(tài)資源的緩存系統(tǒng)，包括源碼保存模塊、版本保存模塊、對比判斷模塊、代碼更新模塊以及代碼執(zhí)行模塊；

所述源碼保存模塊，用于當(dāng)頁面初次加載時，將頁面的代碼保存到Localstroage中；

所述版本保存模塊，用于在源碼保存模塊保存代碼后，在整個頁面上利用cookie保存一個版本號信息，并存儲一個MD5的版本號，與所述源碼保存模塊連接；

所述對比判斷步驟，用于在所述版本保存模塊存儲版本號和版本號信息后，第二次訪問頁面時，引入版本號信息，將當(dāng)前頁面的文件版本號與版本保存模塊存儲版本號的版本號對比，判斷代碼是否更新，與所述版本保存模塊連接；

所述代碼更新模塊，用于當(dāng)所述對比判斷模塊判斷代碼有更新時，重新下發(fā)有變更的代碼，并將當(dāng)前的代碼重新保存到Localstroage內(nèi)，覆蓋原先的數(shù)據(jù)，更新版本號，得到一個新的版本號，與所述對比判斷模塊連接；

所述代碼執(zhí)行模塊，用于當(dāng)所述對比判斷模塊判斷代碼無更新時，解析本地Localstroage并讀取代碼，執(zhí)行下發(fā)代碼，與所述對比判斷模塊連接。

其進一步技術(shù)方案為：所述基于Localstroage的靜態(tài)資源的緩存系統(tǒng)還包括嵌標(biāo)簽?zāi)K，用于將頁面中的js和css嵌入script和style標(biāo)簽，與所述源碼保存模塊連接。

其進一步技術(shù)方案為：所述基于Localstroage的靜態(tài)資源的緩存系統(tǒng)包括緩存代碼分層模塊，用于所述對比判斷模塊判斷代碼有更新后，將需要緩存的代碼分為通用代碼以及業(yè)務(wù)代碼，所述代碼更新模塊再進行重新下發(fā)有變更的代碼，分別與所述對比判斷模塊以及所述代碼更新模塊連接。

其進一步技術(shù)方案為：所述對比判斷模塊包括第一判斷子模塊、第二判斷子模塊、第一執(zhí)行子模塊、第二執(zhí)行子模塊以及第三執(zhí)行子模塊；

所述第一判斷子模塊，用于在所述版本保存模塊存儲版本號和版本號信息后，進入頁面后，判斷頁面中是否存在緩存版本的cookie，與所述版本保存模塊連接；

所述第二判斷子模塊，用于所述第一判斷子模塊判斷頁面中存在緩存版本的cookie，判斷cookie中版本是否為最新版本，與所述第一判斷子模塊連接；

所述第一執(zhí)行子模塊，用于當(dāng)所述第二判斷子模塊判斷cookie中存在過期版本時，下發(fā)過期代碼后，執(zhí)行代碼并將代碼存入到Localstroage，同時重新設(shè)置cookie，分別與所述代碼更新模塊以及所述第二判斷子模塊連接；

所述第二執(zhí)行子模塊，用于當(dāng)所述第二判斷子模塊判斷cookie的版本為最新版本時，cookie中的代碼不會下發(fā)，同時執(zhí)行存在Localstroage中的代碼，分別與所述代碼更新模塊以及所述第二判斷子模塊連接；

所述第三執(zhí)行子模塊，用于當(dāng)所述第一判斷子模塊判斷頁面中不存在緩存版本的cookie時，全量下發(fā)cookie的版本信息，執(zhí)行代碼并將代碼存入到Localstroage，同時重新設(shè)置cookie，分別與所述緩存代碼分層模塊以及所述第一判斷子模塊連接。

本發(fā)明與現(xiàn)有技術(shù)相比的有益效果是：本發(fā)明的基于Localstroage的靜態(tài)資源的緩存方法，通過將初次加載頁面時的代碼存入到Localstroage，同時，在頁面上利用cookie保存一個版本號信息，并存儲一個MD5的版本號，當(dāng)代碼更新，重新下發(fā)整個頁面的資源代碼重新下發(fā)，并且將當(dāng)前的代碼重新保存Localstroage內(nèi)，覆蓋原先的數(shù)據(jù)，擁有一個新的版本號，大幅提高頁面二次訪問速度，網(wǎng)站性能更加優(yōu)異，并且Localstroage被清理的幾率低，緩存失效率低，且存儲空間大安全性高。

下面結(jié)合附圖和具體實施例對本發(fā)明作進一步描述。

附圖說明

圖1為本發(fā)明具體實施例提供的基于Localstroage的靜態(tài)資源的緩存方法的流程框圖一；

圖2為本發(fā)明具體實施例提供的基于Localstroage的靜態(tài)資源的緩存方法的流程框圖二；

圖3為本發(fā)明具體實施例提供的基于Localstroage的靜態(tài)資源的緩存系統(tǒng)的結(jié)構(gòu)框圖。

附圖標(biāo)記

10 嵌標(biāo)簽?zāi)K 20 源碼保存模塊

30 版本保存模塊 40 第三執(zhí)行子模塊

50 第一判斷子模塊 60 第二執(zhí)行子模塊

70 第二判斷子模塊 80 代碼更新模塊

90 代碼執(zhí)行模塊 91 第一執(zhí)行子模塊

92 緩存代碼分層模塊

具體實施方式

為了更充分理解本發(fā)明的技術(shù)內(nèi)容，下面結(jié)合具體實施例對本發(fā)明的技術(shù)方案進一步介紹和說明，但不局限于此。

如圖1～3所示的具體實施例，本實施例提供的基于Localstroage的靜態(tài)資源的緩存方法，可以運用在頁面加載過程中，實現(xiàn)Localstroage的靜態(tài)資源的緩存。

基于Localstroage的靜態(tài)資源的緩存方法，包括以下具體步驟：

步驟一、源碼保存步驟，頁面初次加載時，將頁面的代碼保存到Localstroage中；

步驟二、版本號保存步驟，在整個頁面上利用cookie保存一個版本號信息，并存儲一個MD5的版本號；

步驟三、對比判斷步驟，第二次訪問頁面，引入版本號信息，將當(dāng)前頁面的文件版本號與步驟二中的版本號對比，判斷代碼是否更新，當(dāng)代碼更新時，執(zhí)行步驟四，當(dāng)代碼無更新時，執(zhí)行步驟五；

步驟四、代碼更新步驟，重新下發(fā)有變更的代碼，并將當(dāng)前的代碼重新保存到Localstroage內(nèi)，覆蓋原先的數(shù)據(jù)，更新版本號，得到一個新的版本號；

步驟五、代碼執(zhí)行步驟，解析本地Localstroage并讀取代碼，執(zhí)行下發(fā)代碼；

步驟六、結(jié)束步驟，重復(fù)步驟三，直至頁面不再加載。

上述的基于Localstroage的靜態(tài)資源的緩存方法，通過將初次加載頁面時的代碼存入到Localstroage，同時，在頁面上利用cookie保存一個版本號信息，并存儲一個MD5的版本號，當(dāng)代碼更新，重新下發(fā)整個頁面的資源代碼重新下發(fā)，并且將當(dāng)前的代碼重新保存Localstroage內(nèi)，覆蓋原先的數(shù)據(jù)，擁有一個新的版本號，大幅提高頁面二次訪問速度，網(wǎng)站性能更加優(yōu)異，并且Localstroage被清理的幾率低，緩存失效率低，且存儲空間大安全性高。

更進一步的，上述的步驟一中，頁面初次加載時，需要進行嵌標(biāo)簽步驟，先將頁面中的js和css嵌入script和style標(biāo)簽，以此把代碼存入Localstroage中。

此時，在移動端中，webapp不需要seo，css也可以緩存，再通過js加載頁面。

在所述步驟三中，引入的版本號信息為版本號信息中的config.js。

具體的，在進行所述步驟四中，在進行重新下發(fā)有變更的代碼時，需要進行緩存代碼分層步驟，將需要緩存的代碼分為通用代碼以及業(yè)務(wù)代碼，通過區(qū)分通用代碼和業(yè)務(wù)代碼，通用代碼和業(yè)務(wù)代碼都有自己的獨立版本號，業(yè)務(wù)代碼的修改就不會引起通用代碼的更新，只會更新自己的版本號，下發(fā)自己的新版本。

更進一步的，上述的步驟四中，更新版本號的具體步驟如下：

步驟1、第一判斷步驟，進入頁面后，判斷頁面中是否存在緩存版本的cookie，若頁面中存在緩存版本的cookie，則執(zhí)行步驟2，若頁面中不存在緩存版本的cookie，則執(zhí)行步驟5；

步驟2、第二判斷步驟，判斷cookie中版本是否為最新版本，當(dāng)cookie中存在過期版本時，執(zhí)行步驟3，當(dāng)cookie的版本為最新版本時，執(zhí)行步驟4；

步驟3、第一執(zhí)行步驟，下發(fā)過期代碼后，執(zhí)行代碼并將代碼存入到Localstroage，同時重新設(shè)置cookie后，執(zhí)行步驟6；

步驟4、第二執(zhí)行步驟，cookie中的代碼不會下發(fā)，同時執(zhí)行存在Localstroage中的代碼；

步驟5、第三執(zhí)行步驟，全量下發(fā)cookie的版本信息，執(zhí)行代碼并將代碼存入到Localstroage，同時重新設(shè)置cookie后，執(zhí)行步驟6；

步驟6、結(jié)束步驟，重復(fù)步驟1，直至不再進入頁面。

在本實施例中，如果不存在緩存版本號的cookie，即版本號是對文件內(nèi)容的MD5hash值，則全量拉取靜態(tài)資源，否則從服務(wù)端驗證版本號是否一致，不一致的話認定服務(wù)端文件有更新，重新從服務(wù)端拉取靜態(tài)資源并寫入localstorage，同時更新cookie中的緩存版本號，否則直接從localstorage中獲取。

文件版本號對比是對比客戶端拿到的版本md5hash值和服務(wù)端的MD5hash值對比，不同則判定緩存過期。

本發(fā)明還提供了基于Localstroage的靜態(tài)資源的緩存系統(tǒng)，包括源碼保存模塊20、版本保存模塊30、對比判斷模塊、代碼更新模塊80以及代碼執(zhí)行模塊90；其中，源碼保存模塊20，用于當(dāng)頁面初次加載時，將頁面的代碼保存到Localstroage中；版本保存模塊30，用于在源碼保存模塊20保存代碼后，在整個頁面上利用cookie保存一個版本號信息，并存儲一個MD5的版本號，與源碼保存模塊20連接；對比判斷步驟，用于在版本保存模塊30存儲版本號和版本號信息后，第二次訪問頁面時，引入版本號信息，將當(dāng)前頁面的文件版本號與版本保存模塊30存儲版本號的版本號對比，判斷代碼是否更新，與版本保存模塊30連接；代碼更新模塊80，用于當(dāng)對比判斷模塊判斷代碼有更新時，重新下發(fā)有變更的代碼，并將當(dāng)前的代碼重新保存到Localstroage內(nèi)，覆蓋原先的數(shù)據(jù)，更新版本號，得到一個新的版本號，與對比判斷模塊連接；代碼執(zhí)行模塊90，用于當(dāng)對比判斷模塊判斷代碼無更新時，解析本地Localstroage并讀取代碼，執(zhí)行下發(fā)代碼，與對比判斷模塊連接。

更進一步的，基于Localstroage的靜態(tài)資源的緩存系統(tǒng)還包括嵌標(biāo)簽?zāi)K10，用于將頁面中的js和css嵌入script和style標(biāo)簽，與源碼保存模塊20連接。在頁面初次加載時，嵌標(biāo)簽?zāi)K10先將頁面中的的js和css嵌入script和style標(biāo)簽，以此源碼保存模塊20把代碼存入Localstroage中。

另外，基于Localstroage的靜態(tài)資源的緩存系統(tǒng)還包括緩存代碼分層模塊92，用于對比判斷模塊判斷代碼有更新后，將需要緩存的代碼分為通用代碼以及業(yè)務(wù)代碼，代碼更新模塊80再進行重新下發(fā)有變更的代碼，分別與對比判斷模塊以及代碼更新模塊80連接。

在本實施例中，對比判斷模塊包括第一判斷子模塊50、第二判斷子模塊70、第一執(zhí)行子模塊91、第二執(zhí)行子模塊60以及第三執(zhí)行子模塊40，其中，第一判斷子模塊50，用于在版本保存模塊30存儲版本號和版本號信息后，進入頁面后，判斷頁面中是否存在緩存版本的cookie，與版本保存模塊30連接；第二判斷子模塊70，用于第一判斷子模塊50判斷頁面中存在緩存版本的cookie，判斷cookie中版本是否為最新版本，與第一判斷子模塊50連接；第一執(zhí)行子模塊91，用于當(dāng)?shù)诙袛嘧幽K70判斷cookie中存在過期版本時，下發(fā)過期代碼后，執(zhí)行代碼并將代碼存入到Localstroage，同時重新設(shè)置cookie，分別與代碼更新模塊80以及第二判斷子模塊70連接；第二執(zhí)行子模塊60，用于當(dāng)?shù)诙袛嘧幽K70判斷cookie的版本為最新版本時，cookie中的代碼不會下發(fā)，同時執(zhí)行存在Localstroage中的代碼，分別與代碼更新模塊80以及第二判斷子模塊70連接；第三執(zhí)行子模塊40，用于當(dāng)?shù)谝慌袛嘧幽K50判斷頁面中不存在緩存版本的cookie時，全量下發(fā)cookie的版本信息，執(zhí)行代碼并將代碼存入到Localstroage，同時重新設(shè)置cookie，分別與緩存代碼分層模塊92以及第一判斷子模塊50連接。

上述僅以實施例來進一步說明本發(fā)明的技術(shù)內(nèi)容，以便于讀者更容易理解，但不代表本發(fā)明的實施方式僅限于此，任何依本發(fā)明所做的技術(shù)延伸或再創(chuàng)造，均受本發(fā)明的保護。本發(fā)明的保護范圍以權(quán)利要求書為準(zhǔn)。