防止在Angular上刷新/丢失连接时丢失数据

时间:2019-02-07 12:40:05

标签: angular local-storage session-storage

在Angular中,刷新页面时,您基本上会丢失整个应用程序的进度和变量。防止这种损失的最佳方法是什么?

我知道会话/本地存储,这是我们大多数时候一直在使用的存储。但是我不能认为这是一件好事,因为:

  • 您的数据对前端极为可见。 (我没有在其中存储密码或任何东西,但这仍然很糟糕。ID,GUIDS,其他用户/表的数据非常明显)
  • 您的数据也可以在系统上建立,这可以使 用户的机器/体验缓慢。

通常,我只是有种直觉,您应该尝试避免使用本地/会话存储。所以我只是想知道是否还有其他解决方案。

1 个答案:

答案 0 :(得分:1)

有4种主要方法可以在客户端存储数据

1)作为URL参数

您可以存储在页面中以应有的方式呈现页面所需的所有状态。您受到路由操纵逻辑和大小的限制。另外,您只能存储字符串,并且必须手动序列化其他数据

2)在IndexedDB中

比localStorage好,动作是异步的。难以直接操作,但是可以使用提供类似于localStorage的接口的库

3) localStorage / sessionStorage

简单的键值存储。易于使用和更新。同步和阻塞API。最大大小可能取决于浏览器。可用于存储数据。如果存储敏感数据,请考虑加密(尽管不建议从头开始)

4) cookies

只有大小有限的字符串才需要序列化数据

您使用的所有库实际上都是在这4种可用的基本结构上播放。 Best是一个相对术语。除非您定期与服务器同步数据(例如说自动保存),并在刷新服务器数据时为用户界面补水,否则您必须根据策略和数据进行选择