Javascript AngualrJS：在 html 刷新时维持数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12617103/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngualrJS: sustaining data on html refresh
提问by Aki
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?
有什么方法可以将少量数据加载到 angular js 中的某个缓存中，并且页面刷新时从缓存中加载这些数据并再次显示？
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.
现在的问题是每当我刷新页面时，sharedServices 应用程序共享的详细信息都会重新启动，因为所有 JS 都会在页面刷新时重新加载。
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.
我有一个登录页面和一个主页。登录成功后，使用 $route 我路由到主页并将 loginID 广播到主页控制器。现在，当我刷新此主页或复制 url 并粘贴到另一个选项卡中时，我希望存在相同的数据。但在我的情况下，由于 htmls/javascripts 被重新加载，它被初始化为 null。
Any angular technique available here?
这里有任何可用的角度技术吗？
回答by Roy Truelove
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.
对于少量数据（<= 4k），您可以使用$cookieStore，但之后您需要查看localStorage，请记住 localStorage 将您的应用程序绑定到 HTML5 兼容浏览器。
If you don't mind a little state on your backend, that's an option as well.
如果您不介意后端的一些状态，那也是一种选择。
EDITbased 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.
听起来您的目标是当用户点击刷新时，页面应该看起来好像他们从未点击过它。任何时候这些更改时，您都必须将整个应用程序状态持久保存到 localStorage（范围、DOM 属性、有状态服务）。不确定这是可取的。
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 articleto 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.
使用 URL 来描述应用程序状态，使用 Angular 的 $route 服务。我一直喜欢这篇文章来解释 URL 和状态，尽管这篇文章非常针对 Ember。
至于阻止客户端在刷新时重新加载脚本，没有办法做到这一点 - 最接近的是让服务器为这些脚本返回 304（未修改）代码。
如上所述，范围数据和服务状态必须保存在本地存储中。
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 :)
尽管刷新问题很烦人，但它实际上迫使您尽可能无状态地思考，并且无状态代码更易于维护和测试。如果您正在寻找好处:)
