angularjs - Retain page data on refreshing the page

Question

I am new to angular. I am using a service which gets a list of objects and displays them on the 1st page. Then based on what object was clicked, I am setting the tab header on the next page. But while I am refreshing the page the scope of the list is lost and the tab header is throwing the exception resulting the page to not display the information. Is there any way to retain the information that which object was clicked on previous screen even when refreshing the 2nd page?

Answer 1

您可以使用角度本地存储

Angular 本地存储

示例如何使用它：

使用本地存储的示例

Answer 2

如果您是 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: '/'
      });
  });

---

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

Answer 3

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

一些有用的链接：

$缓存

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

本地存储：

如何使用 Angularjs 将数据存储在本地存储中？

Answer 4

处理这类场景的最佳实践是通过角度服务 + 本地存储的组合

• 服务将帮助您在两个页面/控制器之间传输数据。
• 并将该数据保存到本地存储将帮助您在页面刷新时获取该数据

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

帮助链接

• 控制器之间通过服务的数据