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

时间:2016-04-30 10:57:32

标签: javascript

我有一个常规方案,我从服务器获取一些数据,然后将其与页面一起分发以供以后使用,但是我在想什么是更好的存储方式。

通常我会做类似

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

现在我将我的数据存储在窗口对象中,我可以稍后从我的脚本访问它,但这不会占用内存的两倍吗?数据将作为文本存储在页面上一次,并且作为DOM中的实际数据存储一次,可能不会两倍,但仍会占用更多内存,对吧?

这样的事情不是更好的选择

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

这样一来,数据只会以文本的形式存储在页面中,然后我会在需要它的时候得到它,用它做一些操作,一旦它完成它的业务,JavaScript就会GC它,而不是它的第一个场景除非我手动取消它,否则在我需要它之后很久就会留在记忆中并且很长时间后我会使用它。

我想问一下我的逻辑是否正确或者只是一些废话,这样做有什么实际好处吗?

2 个答案:

答案 0 :(得分:0)

永远不要在全局范围内悬挂大型物体。 使用大量内存,代码根本不干净。你能找到的只是缺点。

更好地在Web存储中存储唯一标识符(可能是id?)本地或会话存储,并且有一种方法可以在需要时从服务器检索这些数据。 为了不让服务器反复执行相同的工作,您可以缓存响应,因此每当您尝试从服务器获取数据时,都可以从缓存中获取数据,从而避免计算。

来自MDN:

  

sessionStorage为每个给定来源维护一个单独的存储区域,该区域在页面会话期间可用(只要浏览器处于打开状态,包括页面重新加载和恢复)

     

localStorage也会做同样的事情,但即使关闭并重新打开浏览器也会一直存在。

Web Storage API

从这些前端持久性方法/ API在前端存储数据取决于您的需求。

答案 1 :(得分:0)

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

将数据从JSON来回转换为文本听起来更麻烦,它值得。如果(现在或将来)数据不需要呈现给用户,则无论如何都需要找到它的位置。用户如何进行小的更改,而不需要执行大的过程来保存整个内容然后将其重新转换为文本?