demo檔案位址：https://pan.baidu.com/s/1kVfwT2v 密碼：3gdf
使用場景：将基本不做修改的JS/CSS檔案緩存到用戶端本地中，每次加載就從本地抓取進而減少http請求。加快載入速度；
首先介紹一些基礎知識：
Application Cache ：從服務端下載下傳指定檔案存放于本地實作離線浏覽
用法：
HTML ：
<!DOCTYPE>
<html manifest=" test.manifest.php " >
...
</html>
PHP ：
test.manifest.php檔案
<?php
header("Content-Type: text/cache-manifest");
?>
CACHE MANIFEST
# 2017-04-14 v1.0
//以為的是需要緩存的檔案
/stylesheets/bootstrap.min.css
/js/jquery.min.js
/js/bootstrap.min.js
https://www.xxx.com/images/picError.jpg
https://www.xxx.com/images/loading.gif
NETWORK:
*
# 代表注釋 後面V1代表版本号（manifest隻有當版本号更改後才會更新緩存）； * 代表除去以上緩存的所有檔案
CACHE MANIFEST - 在此标題下列出的檔案将在首次下載下傳後進行緩存
NETWORK - 在此标題下列出的檔案需要與伺服器的連接配接，且不會被緩存
FALLBACK - 在此标題下列出的檔案規定當頁面無法通路時的回退頁面（比如 404 頁面）
注意:可以通過PHP的for循環列出需要緩存的檔案：
--------------------------------------------------------------------------------------------------------------------------------------------------------localstorage - 類似cookies
永久将資料儲存為JSON字元串或純字元串格式存儲機制（必須為字元串）
作用：就算離線狀态也能正常運作網站的JS / CSS效果；
localstorage自定義失效時間
參考：http://blog.csdn.net/xyphf/article/details/51830770
localstorage基本使用方法
參考：http://www.cnblogs.com/st-leslie/p/5617130.html
//localStorage使用方法;
if(!window.localStorage){
console.log("浏覽器不支援localstorage");
}else{
var storage=window.localStorage;
//資料新增
storage.setItem("a",1); //官方建議使用此方式;也可以storage["a"]=1; 或 storage.a=1;
console.log(typeof storage["a"]);
//資料檢視
var c = storage.getItem("c");
console.log(c);
//資料修改
var new = 11;
storage.a = new;
console.log(storage.a);
//資料删除
//清空所有資料
storage.clear();
console.log(storage);
//清空鍵值對資料
storage.removeItem("a"); //或者使用storage["a"]=1;
console.log(storage);
//擷取鍵值對資料
storage.setItem("c",3);
for(var i=0;i<storage.length;i++){
var key=storage.key(i);
console.log(key); //擷取它的鍵;
console.log(storage[key]); //擷取它的值;
}
//儲存為JSON格式字元串
var data={
name:'xiecanyong',
sex:'man',
hobby:'program'
};
var d=JSON.stringify(data);
storage.setItem("data",d);
console.log(storage.data);
//将JSON格式字元串轉為JSON格式
var json=storage.getItem("data");
var jsonObj=JSON.parse(json);
console.log(jsonObj);
}
localstorage實際使用緩存的JS/CSS檔案方法 注意：使用時是確定是國内還是國外網站。因為ajax同步加載誇國外比較慢；
一般用于JS或CSS多檔案 （除jquery.min檔案） 合并為JSON字元串儲存在緩存機制 (由于第一次通路必須是線上的，是以會存儲JS/CSS字元串)
具體流程圖：
JS 以上流程圖具體代碼（ index.html頁面内 ）： 注意：jquery.ajax()是需要同步與異步；
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//将JS放在<script>内并在body後面加入
function insertScript (script) {
var node=document.createElement('script');
node.innerHTML=script;
document.body.appendChild(node);
}
function startWithResources(resources, storeResources) {
try {
$("head").append('<style>'+ resources.css +'</style>'); //執行CSS
//eval(resources.js);
insertScript(resources.js); //執行JS
if(storeResources){ //true代表線上并需要存儲到緩存中;
var resources = JSON.stringify(resources);
window.localStorage.setItem("resources",resources);
}
} catch (e) {
console.log("執行JS報錯");
}
}
function startWithOnlineResources(resources) {
startWithResources(resources, true);
}
function startWithOfflineResources() {
var resources;
// 判斷是否支援localstorage且localStorage.resources是否存在
if (localStorage && localStorage.resources) {
//localStorage.resources本地緩存的JSON字元串轉為JSON格式
resources = JSON.parse(localStorage.resources);
//JSON.parse() 方法用于将一個 JSON 字元串轉換為對象。
startWithResources(resources, false);
} else {
alert("浏覽器不支援localstorage或不存在緩存資料");
}
}
// 如果是離線狀态
if (navigator && navigator.onLine === false) {
startWithOfflineResources();
// 如果是線上狀态
} else {
$.ajax({
url: 'data.php', //傳回的是需要緩沖的JSON格式字元串資料
async: false , //由于運作完data.php的代碼後下面有私用代碼需要執行，用異步會導緻加載遲于私用代碼；
success: startWithOnlineResources,
error: startWithOfflineResources,
dataType: 'json'
});
}
});
</script>
異步與同步： 由于有私用JS代碼且需要依賴localstorage檔案是以localstorage隻能使用同步加載再向下執行；
data.php
<?php
$js = '';
$js = $js . 'window.APP={}; (function (APP) {';
$js = $js . file_get_contents('xxx01.js');
$js = $js . file_get_contents('xxx02.js');
$js = $js . '}(APP));';
$output['js'] = $js; //建立$output對象并把所有JS合并後字元串賦予js屬性;
$css = '';
$css = $css . file_get_contents('xxx.css');
$output['css'] = $css; //建立$output對象并把所有CSS合并後字元串賦予css屬性;
echo json_encode($output);
?>
最後小知識： sessionstorage - 類似session
浏覽器關閉時字元串類型的資料同時删除 ;
IndexedDB
參考： http://www.cnblogs.com/dolphinX/p/3415761.html
本人已經可以完整實作，但是需要注意的是不能與需要靜态化的網站結合使用，否則更新無效；
如有問題。可聯系我互相交流；