Web前端數據緩存處理

我的這個示例也是在開發中遇到的，場景在Web后台管理系統中。

系統中有一些配置數據在前端需要頻繁使用，所以做了一個前端的緩存。

這個配置數據在后台是放在Redis中緩存的，雖然前端請求對數據庫影響不大，但是頻繁對系統進行請求還是有些不妥。

 

大致邏輯：

1.后台緩存放在Redis中，配置數據有改動時，刷新Redis中的緩存數據。

2.Web用戶登錄之后，加載緩存，放在TOP窗口中的緩存中。

var cache = null;
$.ajax({
        type: "get",
        url: "web/index/getCache",
        success: function(data){
                cache = data;
        }
});

 

此時緩存數據已經存儲到前端了。

這個時候IFrame頁面也需要緩存數據，而IFrame頁面再次去請求后台緩存數據就沒有任何意義了。

這個時候IFrame頁面直接獲取TOP窗口中的緩存數據就可以了。

// 在父頁面中標識本頁面是父級頁面。表示緩存數據在本頁面中。
var cacheData = true;

在子窗口中添加函數去獲取父級TOP窗口的緩存數據。

因為子窗口中可能會嵌套多層。所以在函數中需要進行遞歸判斷。

 

function getTopCache(w) {
        if(!w) {
            w = window;
        }
                // 判斷父級窗口中有沒有cacheData標識
        if(!w["cacheData"]) {
            return getTopCache(w.top.window);
        }
                // 返回父級窗口中的cache
        return w["cache"];
    };

 

 

然后緩存數據處理的公共函數根據業務需求進行定義就行了。