保留刷新页面的页面数据

时间:2014-06-04 09:25:18

标签: angularjs page-refresh rootscope

我是棱角分明的新人。我正在使用一个获取对象列表并在第一页上显示它们的服务。然后根据点击的对象,我在下一页设置标签页眉。但是当我刷新页面时,列表的范围将丢失,并且选项卡标题会抛出异常,导致页面不显示信息。有没有办法保留即使刷新第二页时在前一个屏幕上点击了哪个对象的信息?

4 个答案:

答案 0 :(得分:4)

您可以使用角度局部存储

Angular Local Storage

如何使用它的示例:

Example To Use Local Storage

答案 1 :(得分:4)

如果您不熟悉Angular并从事非任务关键型项目,那么远程服务的额外呼叫并非世界末日。

  

有没有办法保留信息,即使在刷新第二页时,在上一个屏幕上点击了什么对象?

您是否在自己的应用中使用路由?

参见示例:http://plnkr.co/edit/Svg4Po13hMq7WxzNwKDc?p=preview

控制器

app.controller("main", function($scope) {
    $scope.items = [1,2,3,4];
}); 
app.controller("detail", function($scope, $routeParams) {
    $scope.myvalue = $routeParams.id;
});

路由配置

var app = angular.module("app", ['ngRoute']);
app.config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'main',
        controller: 'main'
      })
      .when('/detail/:id', {
        templateUrl: 'detail',
        controller: 'detail'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

当您刷新详细信息页面时,它会记住它的状态。然后你可以向服务部索取数据。

答案 2 :(得分:2)

你有几个angularjs应用程序吗?理论上你应该有一个HTML文件和部分/控制器,你可以存储你想在工厂(singleton)或angularJS缓存中使用的数据,如果要在几个HTML页面之间导航,你可以使用本地存储或重新加载来自服务器的数据。

一些有用的链接:

$缓存

https://docs.angularjs.org/api/ng/service/ $ cacheFactory

本地存储:

How do I store data in local storage using Angularjs?

答案 3 :(得分:1)

处理这类情景的最佳做法是通过角度服务+本地存储

的组合
  • 服务将帮助您在两页之间传输数据/ 控制器。
  • 将数据保存到localstorage将帮助您 在页面刷新上获取该数据

如果数据只是url中的id,那么@Michal Stefanow的答案也可以。

帮助链接