将数据存储在页面上供以后使用

Question

我有一个常规场景，我从服务器获取一些数据，然后将其与页面吐出供以后使用，但是我在想什么会是更好的存储方式它。

通常我会做类似

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

现在我会存储在窗口对象，我可以从我的脚本访问后来我的数据，但并不是要占用双倍的内存？数据将作为文本一次存储在页面上，并且一次作为DOM中的实际数据存储，很可能不会多过两次，但仍会占用更多的内存，对吧？

是不是这样的事情会是一个更好的选择

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

这样的数据将只在页面的文本进行存储，然后我能把它当我需要的时候，做一些操作与它和JavaScript将GC GC它一旦完成它的业务，而不是第一种情况下，它会留在内存很久之前我需要它，很久后我用它，除非我手动取消它。

我想问我的逻辑是正确的还是只是一些废话，是否有任何实际的好处呢？

Answer 1

从来没有在全球范围内悬挂大型物体。 使用大量内存，代码根本不干净。你可以找到的只是缺点。

更好地在Web存储器本地或会话存储中存储唯一标识符（ID可能？），并有方法在需要时从服务器检索这些数据。 为了不让服务器一遍又一遍地执行相同的工作，您可以缓存响应，因此无论何时您尝试从服务器获取数据，都会从缓存中获取数据，从而避免计算。

从MDN：

的sessionStorage维护每个给定的产地证明是可用于网页会话期间单独的存储区域（只要浏览器是开放的，包括页面重新加载和恢复）

localStorage做同样的事情，但即使浏览器关闭并重新打开时仍然存在。

Web Storage API

在从这些前端持久性方法/ API来存储在前端数据达到您的需求。

Answer 2

您是否考虑过使用像AngularJS这样的技术以用户可读的形式呈现JSON数据？您可以使用pagination随时限制屏幕上显示的数据。

将数据从JSON来回转换为文本听起来像是更值得的麻烦。如果存在（现在或将来）不需要呈现给用户的数据，则无论如何您都需要为它找到一个位置。用户如何做一些小的改变，而不用做一个大的过程来保存整个事情，然后将其重新转换为文本？