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

本发明专利技术涉及基于Localstroage的静态资源的缓存方法及其系统，该方法包括源码保存步骤；版本号保存步骤；对比判断步骤，第二次访问页面，引入版本号信息，将当前页面的文件版本号与步骤二中的版本号对比，判断代码是否更新，当代码更新时，执行代码更新步骤，当代码无更新时，执行解析本地Localstroage并读取代码，执行下发代码；结束步骤，重复对比判断步骤，直至页面不再加载。本发明专利技术通过将初次加载页面时的代码存入到Localstroage，在页面上利用cookie保存一个版本号信息，并存储一个MD5的版本号，当代码更新，重新下发整个页面的资源代码重新下发，将当前的代码重新保存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中版本是否为最新版本，与所述第一判断子模块连接；所述第一执行子模块本文档来自技高网...

【技术保护点】
基于Localstroage的静态资源的缓存方法，其特征在于，包括以下具体步骤：步骤一、源码保存步骤，页面初次加载时，将页面的代码保存到Localstroage中；步骤二、版本号保存步骤，在整个页面上利用cookie保存一个版本号信息，并存储一个MD5的版本号；步骤三、对比判断步骤，第二次访问页面，引入版本号信息，将当前页面的文件版本号与步骤二中的版本号对比，判断代码是否更新，当代码更新时，执行步骤四，当代码无更新时，执行步骤五；步骤四、代码更新步骤，重新下发有变更的代码，并将当前的代码重新保存到Localstroage内，覆盖原先的数据，更新版本号，得到一个新的版本号；步骤五、代码执行步骤，解析本地Localstroage并读取代码，执行下发代码；步骤六、结束步骤，重复步骤三，直至页面不再加载。

【技术特征摘要】
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中；所述版本保...

【专利技术属性】
技术研发人员：吴澳，
申请(专利权)人：深圳市彬讯科技有限公司，
类型：发明
国别省市：广东;44