如果脚本已更新，如何刷新页面缓存？ [英] How to refresh the page's cache if scripts have been updated?

问题描述

如果网站已更新，我在线搜索以找到刷新用户缓存的解决方案。除了在脚本文件的url上设置版本控制之外找不到任何东西......

I searched online to find a solution for refreshing user cache if the website has been updated. Couldn't find anything apart from setting version control on url of the script files...

我正在回答下面的问题，需要知道这是不是完美的代码，可能不会在循环中保持刷新。如果需要修改，有人可以告诉我吗？

I'm answering my question below, and need to know if this is a perfect code and might not keep refreshing in a loop. Please could someone let me know if any modifications are required?

推荐答案

我的回答涉及

1. 一个php脚本，用于检查服务器上的选定文件是否有修改日期。


2. 在html页面上，javascript通过jQuery getJSON从php获取数据。


3. 然后它检查有关文件的localstorage数据，这个数据是如果没有通过html5 localstorage找到，则首先存储。


4. 然后它比较localstorage和php jSON数据之间的日期。


5. 如果服务器上有新文件，它会存储新日期而不是本地存储中的旧日期以供将来访问。


6. 仅在找到较新版本的脚本时刷新。

1. a php script that checks selected files on the server for modification date.
2. on the html page, javascript gets the data from php via jQuery getJSON.
3. Then it checks for localstorage data regarding the files, this data is first stored if none found via html5 localstorage.
4. Then it compares dates between localstorage and php jSON data.
5. If there are new files on the server, it stores the new dates instead of the old dates on the localstorage for future visits.
6. Refreshes only if newer versions of the scripts are found.

下面是代码，这里是jsfiddle：[ ::: jsfiddle ::: ]

Below is the code, and here's the jsfiddle: [ ::: jsfiddle ::: ]

Snippet is not allowing localStorage, instead try js fiddle: '/xepjcwsf/'

//Script to check (via php & javascript), if the files loaded into client's cache are old and refreshes the page if newer files found on the server.

$(document).ready( function() {
	
	var newFileCacheDate;		
	//uncomment: //$.getJSON('scripts/file_date.php', function(jsonData){
			setTimeout(function(){
			newFileCacheDate = {"css_1":"30-01-2015","css_2":"28-01-2015","css_3":"07-03-2015","js_1":"28-02-2015","js_2":"02-03-2015"};  //uncomment: //jsonData; 
			var StoredData = getStorage();
			var isUpdated = check_filedate(newFileCacheDate, StoredData);
			if(isUpdated) {
				console.log('files have been updated, isUpdated = true'); 
				addNewStorage_and_refresh(newFileCacheDate); 
				}
		//uncomment: //}).fail(function() { console.log( "Couldn't get the json data." ); });
		}, 1000);
	
	function addNewStorage_and_refresh(newDates){
	 if(typeof(Storage) !== "undefined") {
		localStorage.setItem('filecache_date', JSON.stringify(newDates));
		alert('filedate storage updated, refreshing');
		location.reload();
	 }
	}
	
	function getStorage(){
	if(typeof(Storage) !== "undefined") {
	var fileCacheDate, stored_FileDates;
	var dataToStore = {
		"css_1" : 	'30-01-2014',
		"css_2" :	'28-01-2015',
		"css_3" : 	'07-03-2015',
		"js_1" : 	'28-02-2015',
		"js_2" : 	'02-03-2015'		
		};
	  if (localStorage.getItem("filecache_date") === null) {
		localStorage.setItem('filecache_date', JSON.stringify(dataToStore));
		console.log('filecache=null');
		return dataToStore;
		}
	  else if (localStorage.getItem("filecache_date") != null) {
		fileCacheDate = localStorage.getItem('filecache_date'),
		stored_FileDates = JSON.parse(fileCacheDate);
		console.log('filechache=present');
		return stored_FileDates;
	  }
	 }
	}
	
	function check_filedate(newfile, oldfile){
		var isItUpdated = false;
		$.each(oldfile, function (key, olddata) {
			if(Date.parse(process(olddata)) < Date.parse(process(newfile[key]))){
				console.log('files have been updated = true');
				isItUpdated = true;
				return false;
			}
		});
		return isItUpdated;
		function process(date){ var parts = date.split("-"); return new Date(parts[2], parts[1] - 1, parts[0]); } //to convert and return date in standard format
	}
	
 });
/* THE PHP CODE 
** Paste this PHP code as a separate "file_data.php" file for retrieving json data from **
*******************************************************************************************
<?php

$filenames = array( 
"css_1" => 	'file1_css.css',
"css_2" => 	'file2_css.css',
"js_1" => 	'file3_jscript.js',
"js_2" => 	'file4_jscript.js'
);

$previousDate = array( 
"css_1" =>	'0',
"css_2" =>	'0',
"js_1" => 	'0',
"js_2" => 	'0',
);

foreach ($filenames as $jsonVar => $filename) {
	if (file_exists($filename)) {
		$mtime = filemtime($filename);
		$previousDate[$jsonVar] = date ("d-m-Y", $mtime);
	}
	
}

echo json_encode($previousDate);
?>
*******************************************************************************************
*/

//Below code for demo purpose only.
 $(document).ready( function() {
    $('button#reset').on('click', function(){
       localStorage.removeItem('filecache_date');
        location.reload();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<!-- Check Console for Logs -->
Check Console for Logs
<br><br>
    If you were unable to see console log before page refresh, click on the reset button 
    <br>
(page will refresh after resetting localStorage data) 
    <br><br>
<button id="reset">Reset </button>

<br><br> 
EDIT: Although jsfiddle allows localstorage, the stackoverflow snippet tool doesn't allow it, so this code might not function on stackoverflow.<br><br>

<b style="color:red;">Uncaught SecurityError: Failed to read the 'localStorage' property from 'Window': The document is sandboxed and lacks the 'allow-same-origin' flag.</b>

这篇关于如果脚本已更新，如何刷新页面缓存？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！