在客戶端緩存大量json結果

我有一個asp.net mvc應用程序，它返回JSON結果，包含多達n年的數據，然後在Javascript圖表上呈現數據。在客戶端緩存大量json結果

爲了有一個良好的用戶體驗（在性能方面），我正在尋找最佳的解決方案，是否有可能在客戶端緩存JSON數據，因此當用戶點擊具有不同參數（例如日，周查看等等，查詢相同的JSON數據而不需要訪問服務器。

是否有人可以幫助我們做出關於緩存數據是緩存在客戶端還是服務器端的最佳實踐的最佳決策，還是應該爲每個圖形切換直接命中數據庫？

在此先感謝。

來源

2012-05-15 Nil Pun

* 2年價值數據* 2年穀歌的網絡服務器日誌，還是更小的規模？ – Matt

@Matt它大約有32K行。 –

然後不要發送給客戶端。讓客戶端輪詢服務器。 – Matt

首先，數據庫在哪裏？如果您在使用千兆局域網的本地網絡上，那麼點擊它不會成爲問題。但是，這在互聯網上並非如此。人們有限的帶寬，尤其是在移動設備上，因此你應該限制你的HTTP通話。而且，較少的HTTP調用意味着服務器上的壓力較小。

這裏有一些提示：

考慮分頁

當加載「2年價值」，我想了很多，像100多頁的論文。考慮分頁數據，而不是一次加載全部數據。這可以節省帶寬以及緩存空間（如果它有限）。

如何：讓服務器腳本根據客戶端的需求切片數據。在查詢中使用LIMIT在SQL中創建分頁非常簡單。該邏輯是像

JSONify數據

用於傳輸數據和從所述網絡使用JSON。除了輕量級，它也是結構化的。稍後解析和存儲會更容易。

如何：PHP有一個json_encode函數將數組轉換爲JSON字符串。我假設你的框架具有類似的功能。讓字符串在頁面上回顯，然後使用JSON.parse將JSON字符串轉換爲JS對象。 JSON methods在modern browsers來到本地，但如果你需要迎合舊的瀏覽器，Crockford has a library解析它
如果需要跨頁面緩存持久性存儲使用衆所周知的存儲架構

，我最近碰到PersistJS來到這將localStorage抽象爲瀏覽器上可用的localStorage。此外，這是一個JS implementation of LZW。由於localstorage使用字符串來存儲數據，並且它有5-10MB的限制，所以保持方便。

如何使用JSON.stringify將數據轉換爲字符串並將其與PersistJS一起存儲。然後進行檢索，得到的字符串，並只在需要時

有緩存系統只能調用服務器如果事情是修改使用JSON.parse()
呼叫解析回來，添加或如果事情是不存在的。如果數據存在，爲什麼要爲它調用服務器？
同步緩存

如果你害怕陳舊的數據，那麼有一些AJAX通過使用實時數據在本維基約Comet描述提取的一些方法同步你的緩存系統。

最後兩點取決於您的緩存框架。但BackboneJS允許它的模型和集合同步到服務器，它具有我提到的相同功能。

來源

2012-05-15 13:19:53 Joseph

謝謝。是否有可用的樣本使用您提到的技術？ –

@nilpun已更新 – Joseph

我已經完成了你所要做的，這裏是我的經驗。我在工作中使用Oracle的Site Studio中間件。我尋找一個可以使用它的框架，但找不到一個框架。所以我已經嘗試了下面的兩個選項。

1）數據庫查詢返回一定數量的行。我試了2000次。一個簡單的foreach循環將返回的數據轉換爲JSON數據。所以它逐字地構建了一個很長的JSON變量數組。通過這種方式，您可以模擬本地數據庫的快照。 JS實際上可以非常快速地訪問數組元素，它可能會讓你感到驚訝，你可以多快地分類，修改，刪除信息。

<script> 
var appData = [{'id':'0','first':'Sam','last':'Smith'},{'id':'1','first':'Dan','last':'Smith'}]; 
</script>

此JSON數據包含在腳本標記中。 doc.ready上的JQuery然後根據需要讀取數據並將其添加到html文本中。當用戶更改JSON數據值時，ajax啓動並將更改保存到數據庫。將這樣的系統添加到您的應用程序並不難。之後，我使用Google的Angular.js將數據綁定到UI以獲得乾淨的MV模式，並且快速進行客戶端排序和過濾也很容易。如前所述，Backbone.js和其他JS框架可以將客戶端數據同步到服務器。

2）我將數據保存到html頁面的第二種方式是再次用foreach循環返回的行。然後我使用老式的方式將數據保存在HTML中

<input type="hidden" name="someName" value="someValue" />

然後我使用JQuery來處理數據並將其添加到UI。如果你真的想要得到野生使用JSON實際上你可以將它嵌入到HTML變量，像這樣

<input type="hidden name="row1" value="{'color':'red','style':'fancy','age':'44'}" />

然後，您可以使用jQuery或Angular.js處理數據，並將其綁定到你的UI。

有趣的是，很多應用程序框架沒有內置的客戶端緩存系統。對服務器端的選擇菜單進行排序然後重新生成html確實是低效的。最好在JS中排序並動態重建選擇菜單。這裏有一個關於安全性的問題，你不想將私人信息打印到JSON或HTML變量中，因爲它在查看源下是可見的。你也可以使用更多流氓技術在頁面中嵌入數據。考慮如下：

<span class="data" value="1234"></span> 
$(function() { 
    $('.data').each(function() { 
     var val = $(this).attr('value'); 
     console.log(val); //process data 
    }); 
});

然後，您可以在doc.ready上使用JQuery來處理名爲data的類。您也可以將JSON數據填入該值並稍後解析出來。請記住，JQuery人士反對開發人員以這種方式使用類。根據我的經驗，如果你不喜歡它，它會很好。

來源

2013-06-06 01:50:25 mbokil

從數據庫中恢復數據並保存爲服務器上的靜態文件。給一個.css或.png擴展名。（瀏覽器會自動緩存樣式表和圖像文件。）。
將數據文件名與時間戳保存在一個隱藏字段中（如果文件有變化，請確保從服務器加載最新文件）
使用AJAX從服務器加載文件，第一次將從服務器，但下次它將從瀏覽器緩存中加載。
您可以使用JSON.Parse（）來解析AJAX請求結果。

來源

2016-07-12 07:23:28 Shiyas

您不能更好地將數據保存到.js文件嗎？您可以使用原生JavaScript對象來存儲數據，並且您不會對內容類型「撒謊」... –

在客戶端緩存大量json結果

回答

相關問題