javascript - Angular : sustaining data on html refresh

Question

有什么方法可以让我在 Angular js 中将少量数据加载到某些缓存中，并在页面刷新时从缓存中加载这些数据并再次显示？

现在的问题是，每当我刷新页面时，sharedServices 应用程序共享的详细信息都会重新启动，因为所有 JS 都会在刷新页面时重新加载。

我有一个登录页面和一个主页。登录成功后，我将使用 $route 路由到主页并将登录 ID 广播到主页 Controller 。现在，当我刷新此主页或复制 url 并粘贴到另一个选项卡时，我希望存在相同的数据。但在我的例子中，由于 htmls/javascripts 正在重新加载，它被初始化为 null。

这里有可用的 Angular 技术吗？

Answer 1

看看this discussion .

对于少量数据 (<= 4k)，您可以使用 $cookieStore , 但在那之后你需要查看 localStorage ，请记住，localStorage 会将您的应用程序绑定(bind)到 HTML5 兼容的浏览器。

如果您不介意在后端设置一些状态，那也是一种选择。

EDIT 根据第一条评论

听起来您的目标是当用户点击刷新时，页面应该看起来好像他们从未点击过一样。您必须在任何时候将整个应用程序状态(范围、DOM 属性、有状态服务)持久保存到 localStorage。不确定这是否可取。

不过，您可以足够接近以发挥作用:

扩展上面的答案:

• 使用 URL 来描述应用程序状态，使用 Angular 的 $route 服务。我一直很喜欢this article解释 URL 和状态，尽管这篇文章非常特定于 Ember。

• 就阻止客户端在刷新时重新加载您的脚本而言，没有办法做到这一点 - 您最接近的是让您的服务器为这些脚本返回 304(未修改)代码。

• 如上所述，范围数据和服务状态必须持久保存在本地存储中。

虽然刷新问题很烦人，但它实际上迫使您尽可能无状态地思考，无状态代码更容易维护和测试。如果您正在寻找好处 :)