AngualrJS:在 html 刷新时维持数据 [英] AngualrJS: sustaining data on html refresh

问题描述

有什么方法可以将少量数据加载到 angular js 中的某个缓存中，并且在页面刷新时从缓存中加载这些数据并再次显示?

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

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

这里有任何可用的角度技术吗?

解决方案

看看 这个讨论.

对于少量数据(<= 4k)，您可以使用 $cookieStore，但之后您需要查看 localStorage，记住 localStorage将您的应用与 HTML5 兼容浏览器联系起来.

如果您不介意后端的一些状态，那也是一个选择.

编辑基于第一条评论

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

不过，您可以足够接近以发挥功能:

扩展上面的答案:

• 使用 URL 来描述应用程序状态，使用 Angular 的 $route 服务.我一直喜欢这篇文章来解释 URL 和 state，虽然这篇文章很漂亮特定于 Ember.

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

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

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

is there any way in which i can load few data into some cache in angular js and onrefresh of the page load these datas from cache and display it again?

Right now issue is whenever i refresh the page, the details which were shared by the sharedServices app gets reinitiated since all the JS are reloaded on refresh of a page.

I have a Login page and a home page. On success of Login, using $route i am routing to the home page and broadcasting the loginID to the Homepage controller. now when i refresh this home page or copy the url and paste in another tab, i want the same data to exist. But in my case since the htmls/javascripts are getting reloaded it getting initialized to null.

Any angular technique available here?

解决方案

Take a look at this discussion.

For small amounts of data (<= 4k) you can use $cookieStore, but after that you'll need to look into localStorage, keeping in mind that localStorage ties your app to HTML5 compliant browsers.

If you don't mind a little state on your backend, that's an option as well.

EDIT based on first comment

It sounds like your goal is that when the user hits refresh, the page should look as though they never hit it. You'd have to persist your entire application state to localStorage (scope, DOM properties, stateful services) ANY time these change. Not sure this is advisable.

You can get close enough to be functional, though:

To expand upon the answer from above:

• Use the URL to describe application state, using Angular's $route service. I've always liked this article to explain URL and state, although the article is pretty Ember-specific.

• As far as stopping the client from reloading your scripts upon refresh there is no way to do that - the closest you'll come is having your server return a 304 (Not Modified) code for those scripts.

• Scope data and service state would have to persisted in local storage as described above.

Although the refresh problem is annoying it actually forces you to think as statelessly as possible, and stateless code is much easier to maintain and test. In case you were looking for an upside :)

这篇关于AngualrJS:在 html 刷新时维持数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！