所有数据都会在页面上重新加载。有什么办法可以避免吗？

Question

我在角js中开发了一个仪表板应用程序，它具有搜索功能和多个视图，其中有许多来自该搜索功能的不同数据。

它的单页应用程序。因此，我面临的问题，在页面上重新加载所有的数据都消失了，它显示的视图与空白数据。

有没有办法解决这个问题或任何语言帮助我创建单页应用程序和维护相同的数据在页面重新加载？？

如有任何建议，将不胜感激。

搜索页面

​

搜索后的数据

​

重新加载后的数据

​

Answer 1

您可以使用 sessionStorage 来设置和获取数据.

步骤1 :

创建一个factory服务，该服务将根据键保存和返回保存的会话数据。

app.factory('storageService', ['$rootScope', function($rootScope) {

    return {
        get: function(key) {
            return sessionStorage.getItem(key);
        },
        save: function(key, data) {
            sessionStorage.setItem(key, data);
        }
    };
}]);

步骤2 :

在控制器中注入storageService依赖项，以从会话存储中设置和获取数据。

app.controller('myCtrl',['storageService',function(storageService) {

  // Save session data to storageService on successfull response from $http service.
  storageService.save('key', 'value');

  // Get saved session data from storageService on page reload
  var sessionData = storageService.get('key');

});

Answer 2

您需要在更改应用程序的状态/移动到另一个页面、路由之前保存数据。

所以，要么使用

• Angular services (保存数据、更改路由、返回、检查服务中的数据并从服务中重新分配变量)。
• Local-storage来保存数据。(保存数据、更改路由、返回、检查服务中的数据并从服务中重新分配变量。)
• Rootscope。在根目录中设置数据并移动。回来后，检查变量并重新分配。

Answer 3

您的问题不是保存数据，而是保存URL中的状态。实际上，您只保存“步骤”，而不保存其他信息，因此当您重新加载页面时(刷新、关闭/重新打开浏览器、打开书签或共享.)您没有恢复整个页面所需的所有信息。

将相关的位添加到URL中(因为您有一个页面应用程序，可能在片段标识符中)。使用该信息加载数据，而不是依赖其他机制在“页面”之间传递数据。