页面重新加载时所有数据都消失了。有什么办法可以避免这种情况吗？

Question

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

它的单页应用程序。所以我在页面重新加载时遇到问题，所有数据都消失了，它显示的视图有空白数据。

有什么方法可以解决这个问题，或者有什么语言可以帮助我创建单页应用程序并在页面重新加载时维护相同的数据吗？

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

搜索页面

搜索后的数据

重新加载后的数据

Answer 1

在页面刷新时获取数据，类似于，

$rootScope.on('onStateChangeStart', function(){
  // here make a call to the source
  $http(); // request and try to get data
})

Answer 2

使用 localStorage 或将用户的数据临时保存到数据库中的服务器，然后通过 API 调用（localstorage 有 10MB）限制将其取回。

您可以让您的代码首先尝试检索本地存储值（如果存在）。

Answer 3

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

因此，要么使用

保存该数据

Angular services（保存数据，更改路线，回来查看服务中的数据并从服务中重新分配变量。）
Local-storage保存数据。（保存数据，更改路线，回来检查服务中的数据并从服务中重新分配变量。）
Rootscope。在 rootscope 中设置数据并移动 .. 返回后检查变量并重新分配。

Answer 4

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

第 1 步：

创建一个 factory 服务，该服务将根据密钥 return 保存会话数据。

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 5

您的问题不是保存数据，而是保存 URL 中的状态。实际上，您只保存 "step"，但没有其他信息，因此当您重新加载页面（刷新，或 close/re-open 浏览器，或打开书签，或分享...）时，您不会拥有恢复整页所需的所有信息。

将相关位添加到 URL（因为您有一个单页应用程序，可能在片段标识符中）。使用该信息加载数据，而不是依赖其他机制在 "pages".

之间传递数据

页面重新加载时所有数据都消失了。有什么办法可以避免这种情况吗？

All data is gone on page reload. Is there any way to avoid that?

html

angularjs

angular-http