当浏览器刷新时,我的AngularJS应用程序应该做什么?

时间:2014-09-02 18:14:55

标签: angularjs page-refresh

我正在使用AngularJS完成我的第一个认真项目。一切正常,但我现在卡住了。

如果用户刷新浏览器(例如,F5)怎么办?

传统的Web应用程序在服务器端运行,生成HTML。在这里,更新浏览器不会产生很多问题,因为所有数据都在服务器上:例如,购物车。

在我的应用程序中,AngularJS是唯一的页面。在用户完成他要做的事情之前,我几乎不回到我的服务器。

那么我可以做些什么来解决这个问题而不会在更新浏览器时失去用户的进度?

任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:0)

我认为本地存储应该是存储用户信息或其他数据的最佳选择。

在主模块中使用LocalStorageModule依赖,如下所示:

var masterJs = angular.module('masterJs', [
    'LocalStorageModule',   
    'ngRoute',

]);

假设我必须在登录控制器登录后存储一些数据。所以我们在本地存储中设置数据如下:

angular.module('masterJs')
    .controller('LoginCtrl', function ($scope, $location, $rootScope, $http, $window,     localStorageService) {


    $scope.login_dev = function(auth){
      var url = 'http://masterjs.in/users/login';
      $http({
        url: url,
        method: "POST",
        data:auth
      })

      .success(function(data, status, headers, config) {
         localStorageService.clearAll();
         localStorageService.set('id', data.data._id);
         localStorageService.set('token_id', data.token);
       //var token = localStorageService.get('token_id');
         var owner_id = localStorageService.get('id');
         $location.path('/account/account-overview');
      })

      .error(function(data, status, headers, config) {
       alert("error");
       $location.path('/login_dev')
      });

    }
});

并将angular-locale-Storage.js放在您的应用中并在index.html页面上引用它们。您可以在以下链接中获取angular-local-Storage.js,您可以使用此链接查看更多详细信息。

请参阅this链接或this链接