AngularJS页面刷新时$stateParams参数丢失问题求助

首先，咱们得先搞清楚为什么刷新页面后EventId会丢失：你当前的home.eventlist.eventdetail状态里，参数paramOne是非URL绑定的参数——也就是参数没被放到URL路径里，只存在于应用内存的state状态中。当页面刷新时，整个Angular应用会重启，内存里的状态参数就被清空了，所以会自动使用你设置的默认值defaultValueOne。

下面给你几种可行的解决方案，包括你提到的localStorage实现，以及更推荐的方案：

方案一：把参数绑定到URL（最推荐） #

这是ui-router传递参数的标准做法，符合RESTful风格，刷新页面、分享链接都不会丢失参数，也是最可靠的方案。

修改你的StateRouter.js里的状态配置，把参数放到URL路径中：

app.config(function ($stateProvider, $urlRouterProvider) { 
  $stateProvider 
    .state('home.eventlist', { 
      url: '/eventlist', 
      views: { 
        'homedetailview': { 
          templateUrl: 'EventsPages/ListEvent.html', 
          controller: 'ctrlEventList' 
        } 
      } 
    }) 
    .state('home.eventlist.eventdetail', { 
      // 把参数paramOne绑定到URL，格式为 /eventdetail/[EventId]
      url: '/eventdetail/:paramOne', 
      params: { paramOne: "defaultValueOne" }, // 保留默认值，防止无参数时出错
      views: { 
        'homedetailview@home': { 
          templateUrl: 'EventsPages/AddEvent.html', 
          controller: 'ctrlEventContent', 
        } 
      } 
    }) 
})

修改后，当你从EventList跳转时，URL会变成类似/eventlist/eventdetail/123（假设EventId是123），刷新页面时，ui-router会自动从URL中解析出paramOne的值，不会再用默认值了。你的控制器代码不需要做任何修改，$stateParams.paramOne就能正确获取到EventId。

方案二：使用localStorage存储参数（你提到的方案） #

如果因为某些原因不能把参数放到URL里，可以用localStorage临时存储参数，但这个方案有明显的劣势，后面会说明。

实现步骤： #

1. 在EventList跳转时，把EventId存入localStorage
2. 在EventDetail控制器中，优先从$stateParams取参数，如果取不到（刷新场景），再从localStorage读取

修改EventListController.js：

myApp.controller("ctrlEventList", ['$scope', function ($scope) { 
  $scope.gridEventList = { 
    data: 'eventlistdata', 
    columnDefs: [ 
      { field: 'SiteEventNumber', displayName: 'Event Number' }, 
      { field: 'EventName', displayName: 'Event Name' }, 
      { name: 'actions', displayName: 'Actions', cellTemplate: $scope.actions} 
    ] 
  } 
  // 给跳转链接添加点击事件，存储EventId到localStorage
  $scope.actions = '<a ng-click="saveEventId(row.entity.EventId)" ui-sref=".eventdetail({paramOne:row.entity.EventId})"></a>';
  
  // 新增方法：存储EventId到localStorage
  $scope.saveEventId = function(eventId) {
    localStorage.setItem('currentEventId', eventId);
  }
}])

修改EventDetailController.js：

myApp.controller("ctrlEventContent", ['$scope', '$stateParams', function ($scope, $stateParams) { 
  let eventId = $stateParams.paramOne;
  // 如果刷新页面，$stateParams取到的是默认值，就从localStorage读取
  if (eventId === "defaultValueOne") {
    eventId = localStorage.getItem('currentEventId') || "defaultValueOne";
  }
  alert(eventId);
  
  // 可选：页面销毁时清除localStorage里的参数，避免影响其他页面或后续跳转
  $scope.$on('$destroy', function() {
    localStorage.removeItem('currentEventId');
  });
}])

localStorage方案的劣势： #

• 跨标签页冲突：localStorage是浏览器全局共享的，如果用户在同一浏览器打开多个标签页操作不同事件，会覆盖localStorage里的currentEventId，导致页面加载错误的事件详情。
• 缓存丢失风险：如果用户清除浏览器缓存或使用隐私模式，localStorage里的参数会丢失。
• 无法分享状态：URL里没有参数，用户无法把事件详情页面的链接分享给其他人，其他人打开后只能看到默认值。
• 安全风险：如果EventId是敏感信息，localStorage容易被XSS攻击窃取（恶意脚本可以读取localStorage内容）。

方案三：使用sessionStorage（比localStorage更安全一点） #

和localStorage类似，但sessionStorage是会话级存储——关闭标签页后就会自动清除，不会跨标签页共享，能避免跨标签页参数覆盖的问题，但其他劣势（无法分享、缓存丢失）依然存在。

只需要把上面代码里的localStorage换成sessionStorage即可：

// EventListController中
sessionStorage.setItem('currentEventId', eventId);

// EventDetailController中
eventId = sessionStorage.getItem('currentEventId') || "defaultValueOne";

// 页面销毁时清除
sessionStorage.removeItem('currentEventId');

方案对比总结 #

优先推荐URL参数方案，这是前端路由传递参数的标准做法，除非你有特殊需求不能把参数放到URL里，再考虑localStorage/sessionStorage方案。

内容的提问来源于stack exchange，提问作者simple user