我的這個示例也是在開發中遇到的，場景在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"];
    };

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

作者：Se7end

聲明：本博客文章為原創，只代表本人在工作學習中某一時間內總結的觀點或結論。轉載時請在文章頁面明顯位置給出原文鏈接。

Web前端數據緩存處理