CN106156291A - 基于Localstroage的静态资源的缓存方法及其系统 - Google Patents

Abstract

本发明涉及基于Localstroage的静态资源的缓存方法及其系统，该方法包括源码保存步骤；版本号保存步骤；对比判断步骤，第二次访问页面，引入版本号信息，将当前页面的文件版本号与步骤二中的版本号对比，判断代码是否更新，当代码更新时，执行代码更新步骤，当代码无更新时，执行解析本地Localstroage并读取代码，执行下发代码；结束步骤，重复对比判断步骤，直至页面不再加载。本发明通过将初次加载页面时的代码存入到Localstroage，在页面上利用cookie保存一个版本号信息，并存储一个MD5的版本号，当代码更新，重新下发整个页面的资源代码重新下发，将当前的代码重新保存Localstroage内，覆盖原先的数据，拥有一个新的版本号，大幅提高页面二次访问速度，缓存失效率低，存储空间大安全性高。

Description

基于Localstroage的静态资源的缓存方法及其系统

技术领域

本发明涉及静态资源的缓存方法，更具体地说是指基于Localstroage的静态资源的缓存方法及缓存系统。

背景技术

Localstroage为HTML5本地存储web storage特性的API之一，主要作用是将数据保存在客户端中，而客户端一般是指上海网站设计用户的计算机。在移动设备上，由于大部分浏览器都支持web storage特性，因此在android和ios等智能手机上的web浏览器都能正常使用该特性。Cookie实际上是一小段的文本信息，客户端请求服务器，如果服务器需要记录该用户状态，就使用response向客户端浏览器颁发一个Cookie，客户端浏览器会把Cookie保存起来，当浏览器再请求该网站时，浏览器把请求的网址连同该Cookie一同提交给服务器，服务器检查该Cookie，以此来辨认用户状态，服务器还可以根据需要修改Cookie的内容。通常需要SEO，导致css不能缓存，仅缓存js使得整个缓存方案意义减小，在pc端中兼容性不太好，不支持LS的浏览器比例仍然很大，网络速度快，协商缓存响应快，Localstroage读取+eval很多时候会比不上304(未修改，自从上次请求后，请求的网页未修改过)。

在页面渲染之后，需要读取Localstroage中缓存内容，如果有一个资源更新，那么就需要整个页面的资源代码重新下发，所以往往每周上线的时候会引起页面性能数据抖动。任何在该域内的所有页面，都可以访问Localstroage数据，但各个浏览器厂商的浏览器之间的数据是各自独立的，如果在firefox中使用Localstroage存储一组数据，在chrome浏览器下是无法读取的，同样，由于Localstroage数据是保存在用户的设备中的，同一个应用程序在不同设备上保存的数据是不同的。

中国专利201410003001.1公开一种页面资源的加载方法及装置，涉及信息技术领域，可以避免针对同一资源重复向网络服务器发送资源请求，减少网络资源的浪费。所述方法包括：首先启动页面解析线程，然后判断本地离线应用缓存中是否缓存有所述页面中需要加载的资源，所述本地离线应用缓存中缓存有通过解析manifest文件获取的资源，若所述本地离线应用缓存中缓存有所述页面中需要加载的资源，则从所述本地离线应用缓存中读取所述页面中需要加载的资源。

上述的专利并没有指出数据更新时，如何进行选择静态资源的缓存或者资源更新。

因此，有必要设计一种静态资源的缓存方法，实现在移动端WebApp不需要seo，数据也能缓存加载，Localstroage被清理的几率低，存储空间大，安全性高。

发明内容

本发明的目的在于克服现有技术的缺陷，提供基于Localstroage的静态资源的缓存方法及其系统。

为实现上述目的，本发明采用以下技术方案：基于Localstroage的静态资源的缓存方法，包括以下具体步骤：

步骤一、源码保存步骤，页面初次加载时，将页面的代码保存到Localstroage中；

步骤二、版本号保存步骤，在整个页面上利用cookie保存一个版本号信息，并存储一个MD5的版本号；

步骤三、对比判断步骤，第二次访问页面，引入版本号信息，将当前页面的文件版本号与步骤二中的版本号对比，判断代码是否更新，当代码更新时，执行步骤四，当代码无更新时，执行步骤五；

步骤四、代码更新步骤，重新下发有变更的代码，并将当前的代码重新保存到Localstroage内，覆盖原先的数据，更新版本号，得到一个新的版本号；

步骤五、代码执行步骤，解析本地Localstroage并读取代码，执行下发代码；

步骤六、结束步骤，重复步骤三，直至页面不再加载。

其进一步技术方案为：所述步骤一中，页面初次加载时，需要进行嵌标签步骤，先将页面中的js和css嵌入script和style标签，以此把代码存入Localstroage中。

其进一步技术方案为：所述步骤三中，引入的版本号信息为版本号信息中的config.js。

其进一步技术方案为：所述步骤四中，在进行重新下发有变更的代码时，需要进行缓存代码分层步骤，将需要缓存的代码分为通用代码以及业务代码。

其进一步技术方案为：所述步骤四中，更新版本号的具体步骤如下：

步骤1、第一判断步骤，进入页面后，判断页面中是否存在缓存版本的cookie，若页面中存在缓存版本的cookie，则执行步骤2，若页面中不存在缓存版本的cookie，则执行步骤5；

步骤2、第二判断步骤，判断cookie中版本是否为最新版本，当cookie中存在过期版本时，执行步骤3，当cookie的版本为最新版本时，执行步骤4；

步骤3、第一执行步骤，下发过期代码后，执行代码并将代码存入到Localstroage，同时重新设置cookie后，执行步骤6；

步骤4、第二执行步骤，cookie中的代码不会下发，同时执行存在Localstroage中的代码；

步骤5、第三执行步骤，全量下发cookie的版本信息，执行代码并将代码存入到Localstroage，同时重新设置cookie后，执行步骤6；

步骤6、结束步骤，重复步骤1，直至不再进入页面。

本发明还提供了基于Localstroage的静态资源的缓存系统，包括源码保存模块、版本保存模块、对比判断模块、代码更新模块以及代码执行模块；

所述源码保存模块，用于当页面初次加载时，将页面的代码保存到Localstroage中；

所述版本保存模块，用于在源码保存模块保存代码后，在整个页面上利用cookie保存一个版本号信息，并存储一个MD5的版本号，与所述源码保存模块连接；

所述对比判断步骤，用于在所述版本保存模块存储版本号和版本号信息后，第二次访问页面时，引入版本号信息，将当前页面的文件版本号与版本保存模块存储版本号的版本号对比，判断代码是否更新，与所述版本保存模块连接；

所述代码更新模块，用于当所述对比判断模块判断代码有更新时，重新下发有变更的代码，并将当前的代码重新保存到Localstroage内，覆盖原先的数据，更新版本号，得到一个新的版本号，与所述对比判断模块连接；

所述代码执行模块，用于当所述对比判断模块判断代码无更新时，解析本地Localstroage并读取代码，执行下发代码，与所述对比判断模块连接。

其进一步技术方案为：所述基于Localstroage的静态资源的缓存系统还包括嵌标签模块，用于将页面中的js和css嵌入script和style标签，与所述源码保存模块连接。

其进一步技术方案为：所述基于Localstroage的静态资源的缓存系统包括缓存代码分层模块，用于所述对比判断模块判断代码有更新后，将需要缓存的代码分为通用代码以及业务代码，所述代码更新模块再进行重新下发有变更的代码，分别与所述对比判断模块以及所述代码更新模块连接。

其进一步技术方案为：所述对比判断模块包括第一判断子模块、第二判断子模块、第一执行子模块、第二执行子模块以及第三执行子模块；

所述第一判断子模块，用于在所述版本保存模块存储版本号和版本号信息后，进入页面后，判断页面中是否存在缓存版本的cookie，与所述版本保存模块连接；

所述第二判断子模块，用于所述第一判断子模块判断页面中存在缓存版本的cookie，判断cookie中版本是否为最新版本，与所述第一判断子模块连接；

所述第一执行子模块，用于当所述第二判断子模块判断cookie中存在过期版本时，下发过期代码后，执行代码并将代码存入到Localstroage，同时重新设置cookie，分别与所述代码更新模块以及所述第二判断子模块连接；

所述第二执行子模块，用于当所述第二判断子模块判断cookie的版本为最新版本时，cookie中的代码不会下发，同时执行存在Localstroage中的代码，分别与所述代码更新模块以及所述第二判断子模块连接；

所述第三执行子模块，用于当所述第一判断子模块判断页面中不存在缓存版本的cookie时，全量下发cookie的版本信息，执行代码并将代码存入到Localstroage，同时重新设置cookie，分别与所述缓存代码分层模块以及所述第一判断子模块连接。

本发明与现有技术相比的有益效果是：本发明的基于Localstroage的静态资源的缓存方法，通过将初次加载页面时的代码存入到Localstroage，同时，在页面上利用cookie保存一个版本号信息，并存储一个MD5的版本号，当代码更新，重新下发整个页面的资源代码重新下发，并且将当前的代码重新保存Localstroage内，覆盖原先的数据，拥有一个新的版本号，大幅提高页面二次访问速度，网站性能更加优异，并且Localstroage被清理的几率低，缓存失效率低，且存储空间大安全性高。

下面结合附图和具体实施例对本发明作进一步描述。

附图说明

图1为本发明具体实施例提供的基于Localstroage的静态资源的缓存方法的流程框图一；

图2为本发明具体实施例提供的基于Localstroage的静态资源的缓存方法的流程框图二；

图3为本发明具体实施例提供的基于Localstroage的静态资源的缓存系统的结构框图。

附图标记

10 嵌标签模块 20 源码保存模块

30 版本保存模块 40 第三执行子模块

50 第一判断子模块 60 第二执行子模块

70 第二判断子模块 80 代码更新模块

90 代码执行模块 91 第一执行子模块

92 缓存代码分层模块

具体实施方式

为了更充分理解本发明的技术内容，下面结合具体实施例对本发明的技术方案进一步介绍和说明，但不局限于此。

如图1～3所示的具体实施例，本实施例提供的基于Localstroage的静态资源的缓存方法，可以运用在页面加载过程中，实现Localstroage的静态资源的缓存。

基于Localstroage的静态资源的缓存方法，包括以下具体步骤：

步骤一、源码保存步骤，页面初次加载时，将页面的代码保存到Localstroage中；

步骤二、版本号保存步骤，在整个页面上利用cookie保存一个版本号信息，并存储一个MD5的版本号；

步骤三、对比判断步骤，第二次访问页面，引入版本号信息，将当前页面的文件版本号与步骤二中的版本号对比，判断代码是否更新，当代码更新时，执行步骤四，当代码无更新时，执行步骤五；

步骤四、代码更新步骤，重新下发有变更的代码，并将当前的代码重新保存到Localstroage内，覆盖原先的数据，更新版本号，得到一个新的版本号；

步骤五、代码执行步骤，解析本地Localstroage并读取代码，执行下发代码；

步骤六、结束步骤，重复步骤三，直至页面不再加载。

上述的基于Localstroage的静态资源的缓存方法，通过将初次加载页面时的代码存入到Localstroage，同时，在页面上利用cookie保存一个版本号信息，并存储一个MD5的版本号，当代码更新，重新下发整个页面的资源代码重新下发，并且将当前的代码重新保存Localstroage内，覆盖原先的数据，拥有一个新的版本号，大幅提高页面二次访问速度，网站性能更加优异，并且Localstroage被清理的几率低，缓存失效率低，且存储空间大安全性高。

更进一步的，上述的步骤一中，页面初次加载时，需要进行嵌标签步骤，先将页面中的js和css嵌入script和style标签，以此把代码存入Localstroage中。

此时，在移动端中，webapp不需要seo，css也可以缓存，再通过js加载页面。

在所述步骤三中，引入的版本号信息为版本号信息中的config.js。

具体的，在进行所述步骤四中，在进行重新下发有变更的代码时，需要进行缓存代码分层步骤，将需要缓存的代码分为通用代码以及业务代码，通过区分通用代码和业务代码，通用代码和业务代码都有自己的独立版本号，业务代码的修改就不会引起通用代码的更新，只会更新自己的版本号，下发自己的新版本。

更进一步的，上述的步骤四中，更新版本号的具体步骤如下：

步骤1、第一判断步骤，进入页面后，判断页面中是否存在缓存版本的cookie，若页面中存在缓存版本的cookie，则执行步骤2，若页面中不存在缓存版本的cookie，则执行步骤5；

步骤2、第二判断步骤，判断cookie中版本是否为最新版本，当cookie中存在过期版本时，执行步骤3，当cookie的版本为最新版本时，执行步骤4；

步骤3、第一执行步骤，下发过期代码后，执行代码并将代码存入到Localstroage，同时重新设置cookie后，执行步骤6；

步骤4、第二执行步骤，cookie中的代码不会下发，同时执行存在Localstroage中的代码；

步骤5、第三执行步骤，全量下发cookie的版本信息，执行代码并将代码存入到Localstroage，同时重新设置cookie后，执行步骤6；

步骤6、结束步骤，重复步骤1，直至不再进入页面。

在本实施例中，如果不存在缓存版本号的cookie，即版本号是对文件内容的MD5hash值，则全量拉取静态资源，否则从服务端验证版本号是否一致，不一致的话认定服务端文件有更新，重新从服务端拉取静态资源并写入localstorage，同时更新cookie中的缓存版本号，否则直接从localstorage中获取。

文件版本号对比是对比客户端拿到的版本md5hash值和服务端的MD5hash值对比，不同则判定缓存过期。

本发明还提供了基于Localstroage的静态资源的缓存系统，包括源码保存模块20、版本保存模块30、对比判断模块、代码更新模块80以及代码执行模块90；其中，源码保存模块20，用于当页面初次加载时，将页面的代码保存到Localstroage中；版本保存模块30，用于在源码保存模块20保存代码后，在整个页面上利用cookie保存一个版本号信息，并存储一个MD5的版本号，与源码保存模块20连接；对比判断步骤，用于在版本保存模块30存储版本号和版本号信息后，第二次访问页面时，引入版本号信息，将当前页面的文件版本号与版本保存模块30存储版本号的版本号对比，判断代码是否更新，与版本保存模块30连接；代码更新模块80，用于当对比判断模块判断代码有更新时，重新下发有变更的代码，并将当前的代码重新保存到Localstroage内，覆盖原先的数据，更新版本号，得到一个新的版本号，与对比判断模块连接；代码执行模块90，用于当对比判断模块判断代码无更新时，解析本地Localstroage并读取代码，执行下发代码，与对比判断模块连接。

更进一步的，基于Localstroage的静态资源的缓存系统还包括嵌标签模块10，用于将页面中的js和css嵌入script和style标签，与源码保存模块20连接。在页面初次加载时，嵌标签模块10先将页面中的的js和css嵌入script和style标签，以此源码保存模块20把代码存入Localstroage中。

另外，基于Localstroage的静态资源的缓存系统还包括缓存代码分层模块92，用于对比判断模块判断代码有更新后，将需要缓存的代码分为通用代码以及业务代码，代码更新模块80再进行重新下发有变更的代码，分别与对比判断模块以及代码更新模块80连接。

在本实施例中，对比判断模块包括第一判断子模块50、第二判断子模块70、第一执行子模块91、第二执行子模块60以及第三执行子模块40，其中，第一判断子模块50，用于在版本保存模块30存储版本号和版本号信息后，进入页面后，判断页面中是否存在缓存版本的cookie，与版本保存模块30连接；第二判断子模块70，用于第一判断子模块50判断页面中存在缓存版本的cookie，判断cookie中版本是否为最新版本，与第一判断子模块50连接；第一执行子模块91，用于当第二判断子模块70判断cookie中存在过期版本时，下发过期代码后，执行代码并将代码存入到Localstroage，同时重新设置cookie，分别与代码更新模块80以及第二判断子模块70连接；第二执行子模块60，用于当第二判断子模块70判断cookie的版本为最新版本时，cookie中的代码不会下发，同时执行存在Localstroage中的代码，分别与代码更新模块80以及第二判断子模块70连接；第三执行子模块40，用于当第一判断子模块50判断页面中不存在缓存版本的cookie时，全量下发cookie的版本信息，执行代码并将代码存入到Localstroage，同时重新设置cookie，分别与缓存代码分层模块92以及第一判断子模块50连接。

上述仅以实施例来进一步说明本发明的技术内容，以便于读者更容易理解，但不代表本发明的实施方式仅限于此，任何依本发明所做的技术延伸或再创造，均受本发明的保护。本发明的保护范围以权利要求书为准。

Claims (9)

1.基于Localstroage的静态资源的缓存方法，其特征在于，包括以下具体步骤：

步骤一、源码保存步骤，页面初次加载时，将页面的代码保存到Localstroage中；

步骤二、版本号保存步骤，在整个页面上利用cookie保存一个版本号信息，并存储一个MD5的版本号；

步骤三、对比判断步骤，第二次访问页面，引入版本号信息，将当前页面的文件版本号与步骤二中的版本号对比，判断代码是否更新，当代码更新时，执行步骤四，当代码无更新时，执行步骤五；

步骤四、代码更新步骤，重新下发有变更的代码，并将当前的代码重新保存到Localstroage内，覆盖原先的数据，更新版本号，得到一个新的版本号；

步骤五、代码执行步骤，解析本地Localstroage并读取代码，执行下发代码；

步骤六、结束步骤，重复步骤三，直至页面不再加载。

2.根据权利要求1所述的基于Localstroage的静态资源的缓存方法，其特征在于，所述步骤一中，页面初次加载时，需要进行嵌标签步骤，先将页面中的js和css嵌入script和style标签，以此把代码存入Localstroage中。

3.根据权利要求1或2所述的基于Localstroage的静态资源的缓存方法，其特征在于，所述步骤三中，引入的版本号信息为版本号信息中的config.js。

4.根据权利要求3所述的基于Localstroage的静态资源的缓存方法，其特征在于，所述步骤四中，在进行重新下发有变更的代码时，需要进行缓存代码分层步骤，将需要缓存的代码分为通用代码以及业务代码。

5.根据权利要求4所述的基于Localstroage的静态资源的缓存方法，其特征在于，所述步骤四中，更新版本号的具体步骤如下：

步骤1、第一判断步骤，进入页面后，判断页面中是否存在缓存版本的cookie，若页面中存在缓存版本的cookie，则执行步骤2，若页面中不存在缓存版本的cookie，则执行步骤5；

步骤2、第二判断步骤，判断cookie中版本是否为最新版本，当cookie中存在过期版本时，执行步骤3，当cookie的版本为最新版本时，执行步骤4；

步骤3、第一执行步骤，下发过期代码后，执行代码并将代码存入到Localstroage，同时重新设置cookie后，执行步骤6；

步骤4、第二执行步骤，cookie中的代码不会下发，同时执行存在Localstroage中的代码；

步骤5、第三执行步骤，全量下发cookie的版本信息，执行代码并将代码存入到Localstroage，同时重新设置cookie后，执行步骤6；

步骤6、结束步骤，重复步骤1，直至不再进入页面。

6.基于Localstroage的静态资源的缓存系统，其特征在于，包括源码保存模块、版本保存模块、对比判断模块、代码更新模块以及代码执行模块；

所述源码保存模块，用于当页面初次加载时，将页面的代码保存到Localstroage中；

所述版本保存模块，用于在源码保存模块保存代码后，在整个页面上利用cookie保存一个版本号信息，并存储一个MD5的版本号，与所述源码保存模块连接；

所述对比判断步骤，用于在所述版本保存模块存储版本号和版本号信息后，第二次访问页面时，引入版本号信息，将当前页面的文件版本号与版本保存模块存储版本号的版本号对比，判断代码是否更新，与所述版本保存模块连接；

所述代码更新模块，用于当所述对比判断模块判断代码有更新时，重新下发有变更的代码，并将当前的代码重新保存到Localstroage内，覆盖原先的数据，更新版本号，得到一个新的版本号，与所述对比判断模块连接；

所述代码执行模块，用于当所述对比判断模块判断代码无更新时，解析本地Localstroage并读取代码，执行下发代码，与所述对比判断模块连接。

7.根据权利要求6所述的基于Localstroage的静态资源的缓存系统，其特征在于，所述基于Localstroage的静态资源的缓存系统还包括嵌标签模块，用于将页面中的js和css嵌入script和style标签，与所述源码保存模块连接。

8.根据权利要求6或7所述的基于Localstroage的静态资源的缓存系统，其特征在于，所述基于Localstroage的静态资源的缓存系统包括缓存代码分层模块，用于所述对比判断模块判断代码有更新后，将需要缓存的代码分为通用代码以及业务代码，所述代码更新模块再进行重新下发有变更的代码，分别与所述对比判断模块以及所述代码更新模块连接。

9.根据权利要求8所述的基于Localstroage的静态资源的缓存系统，其特征在于，所述对比判断模块包括第一判断子模块、第二判断子模块、第一执行子模块、第二执行子模块以及第三执行子模块；

所述第一判断子模块，用于在所述版本保存模块存储版本号和版本号信息后，进入页面后，判断页面中是否存在缓存版本的cookie，与所述版本保存模块连接；

所述第二判断子模块，用于所述第一判断子模块判断页面中存在缓存版本的cookie，判断cookie中版本是否为最新版本，与所述第一判断子模块连接；

所述第一执行子模块，用于当所述第二判断子模块判断cookie中存在过期版本时，下发过期代码后，执行代码并将代码存入到Localstroage，同时重新设置cookie，分别与所述代码更新模块以及所述第二判断子模块连接；

所述第二执行子模块，用于当所述第二判断子模块判断cookie的版本为最新版本时，cookie中的代码不会下发，同时执行存在Localstroage中的代码，分别与所述代码更新模块以及所述第二判断子模块连接；

所述第三执行子模块，用于当所述第一判断子模块判断页面中不存在缓存版本的cookie时，全量下发cookie的版本信息，执行代码并将代码存入到Localstroage，同时重新设置cookie，分别与所述缓存代码分层模块以及所述第一判断子模块连接。