刷新页面时保留页面数据答案

【问题标题】：Retain page data on refreshing the page刷新页面时保留页面数据
【发布时间】：2014-07-24 21:10:57
【问题描述】：

我是 Angular 的新手。我正在使用一项服务，它获取对象列表并将它们显示在第一页上。然后根据单击的对象，我在下一页设置选项卡标题。但是，当我刷新页面时，列表的范围会丢失，并且选项卡标题会引发异常，导致页面不显示信息。即使刷新第二页，有什么方法可以保留在前一个屏幕上单击了哪个对象的信息？

【问题讨论】：

在这种情况下你只能使用本地存储或cookies
Refresh 是指浏览器刷新，还是导航到 SPA 中的其他视图？
@Chandermani 。浏览器刷新。

标签： angularjs page-refresh rootscope

【解决方案1】：

您可以使用角度本地存储

Angular Local Storage

使用示例：

Example To Use Local Storage

【讨论】：

【解决方案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: '/'
      });
  });

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

【讨论】：

【解决方案3】：

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

一些有用的链接：

$缓存

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

本地存储：

How do I store data in local storage using Angularjs?

【讨论】：

【解决方案4】：

处理这类场景的最佳实践是结合angular service + localstorage

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

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

帮助链接

Data Between controllers through service

【讨论】：