在頁面上存儲數據以備后用

Question

我有一個正常的場景，我要從服務器獲取一些數據，然后將其隨頁面吐出以備后用，但是我在想哪種存儲方法會更好。

通常我會做類似的事情

<script>
    window.myData = <?= json_encode($myBigData) ?>;
</script>

現在，我將數據存儲在window對象中，以后可以從腳本中訪問該對象，但這不是要占用兩倍的內存嗎？ 數據將以文本形式存儲在頁面上一次，並以DOM中的實際數據形式存儲一次，大概不會兩倍，但仍會占用更多的內存，對嗎？

這樣不是更好的選擇嗎

<script>
function getMyData() {
    return <?= json_encode($myBigData) ?>;
}
</script>

這樣，數據將僅以文本形式存儲在頁面中，然后我將在需要時獲取它，對其進行一些操作，並且一旦處理完畢，JavaScript將對其進行GC處理，這與第一種情況保持不變除非需要手動取消設置，否則在我需要它之前和使用之后很長一段時間都無法使用內存。

我想問一下我的邏輯是正確的還是只是胡說八道，這樣做有什么實際好處嗎？

Answer 1

切勿在全局范圍內徘徊大物件。 使用大量內存，代碼根本不干凈。 您只能找到缺點。

最好在本地存儲或會話存儲中的Web存儲中存儲唯一標識符（可能是ID？），並具有在需要時從服務器檢索那些數據的方法。 為了不讓服務器一遍又一遍地執行相同的工作，您可以緩存響應，因此，每當您嘗試從服務器獲取數據時，都會從緩存中獲取它們，從而避免了計算。

從MDN：

sessionStorage為每個給定的來源維護一個單獨的存儲區域，該存儲區域在頁面會話持續時間內可用（只要瀏覽器處於打開狀態，包括頁面重新加載和還原）

localStorage可以做同樣的事情，但是即使關閉並重新打開瀏覽器也可以保留。

在這些前端中，哪種持久性方法/ API在前端存儲數據完全可以滿足您的需求。

Answer 2

您是否考慮過使用AngularJS之類的技術以用戶可讀的形式顯示JSON數據？ 您可以隨時使用分頁限制屏幕上顯示的數據。

將數據從JSON來回轉換為文本聽起來更麻煩，這值得。 如果有（現在或將來）不需要向用戶顯示的數據，則無論如何都需要為其找到一個位置。 用戶將如何進行小的更改，而無需進行大的過程來保存整個內容，然后將其重新轉換為文本？