Angularjs：为啥页面刷新会破坏 $rootScope 的值？

Posted 2023-03-05

【中文标题】Angularjs：为啥页面刷新会破坏 $rootScope 的值？

【英文标题】：Angularjs: Why page refresh destroy the values of $rootScope?Angularjs：为什么页面刷新会破坏 $rootScope 的值？

【发布时间】：2015-07-03 04:41:55

【问题描述】：

在我的本地路由http://localhost:9000/#/deviceDetail/ 中，我有一个管理该视图的控制器。在进入该视图之前，我将一些变量设置为$rootScope（例如$rootScope.dashboards）。

一旦在该视图上，我可以访问仪表板属性，但是当我使用 F5 键刷新页面时，例如属性仪表板会丢失。

我尝试将 $rootScope 保存在 localStorage 变量中，但使用 JSON.stringify 方法时遇到循环引用问题。

有什么技巧可以管理吗？

【问题讨论】：

你可以试试这个angular module

我认为您的问题是您没有使用正确的路由器，并且无法在路由更改时加载必要的数据，而不是像“点击”这样的操作。

【参考方案1】：

AngularJS 是一个 javascript 框架，所有的东西都存储在内存堆中，当你打开一个页面时这个堆就开始了，你关闭它之后它就被销毁了。在这种情况下，浏览器刷新就像关闭和重新打开页面一样。

要在刷新后保留该值，您应该将其存储在 cookie 中，为此您可以使用例如 $cookies 或 sessionStorage / localStorage，这是 M K 推荐的。

【讨论】：

Cookies 实际上是个坏主意。您应该改用 localStorage。

我推荐它是因为$cookies 默认是有角度的，但你必须以“普通方式”访问 localStorage 或添加额外的模块。

OP 确实说他们尝试了localStorage 并遇到了问题。你回答了why，但没有回答how

我确定此错误与 JSON.stringify 无关，而是与您正在做的其他事情有关。也许只是将您需要的东西串起来而不是整个$rootScope 将是一件好事。而且效率更高。

没有办法你应该需要整个 rootScope，如果你这样做，你做错了。仅存储您要添加的 rootScope 中的值，并在打开页面时将它们加载到 rootScope 中。你也可以使用 localStorage 来做到这一点。

【参考方案2】：

使用 localStorage 和 $stateChangerStart 检查你是否使用 ui.route 像这样的

$rootScope.$on('$stateChangeStart', function(event, toState) 

            // Grab the user from local storage and parse it to an object
            var user = JSON.parse(localStorage.getItem('user'));            

            if(user) 

                $rootScope.currentUser = user;

            
        );

【参考方案3】：

在Getting started with AngularJS and ASP.NET MVC - The long awaited Part Three 的文章之后，我尝试使用 cookie 存储身份验证令牌。但是每当我按 F5 或刷新 Chrome 浏览器时，cookie 就会被破坏。

那篇文章说 ngCookies 有助于处理页面刷新以维护页面刷新的令牌。我曾认为它确实如此，但我不知道 ngCookies 杀了我。如果页面刷新，它就会被破坏！经过数小时的在线研究后，我发现这篇文章对我有帮助。

根据 M K 的说法，我使用 localStorage（或 sessionStorage）帮助我摆脱了 cookie 的头痛。 使用 cookie 来存储身份验证令牌或其他东西是个坏主意。正如上面提到/确认的那样，我遇到了这个问题，我迷路了（不知道来自“使用 cookie”的错误）。所以，这是那篇文章中的一个错误。

谢谢你百万次，M K。

【讨论】：

正好有这个问题，文章有bug！我通过在 app.module 中导入 ngStorage 解决了这个问题，并在我的会话服务中使用了$localStorage 和以下代码：this.getToken = function () if (!$localStorage.myApp) if (!this.token) return undefined; this.setToken(this.token); return $localStorage.myApp; this.setToken = function (token) this.token = token; $localStorage.myApp = token;