在Angular中跨頁面刷新保持數據

Question

angular.module('eventTracker', [])

.controller('MainCtrl', ['$scope', 'Event', function($scope, Event){
    $scope.eventData = {}
    $scope.onSubmit = function(){
        Event.Add($scope.eventData)
        $scope.eventData = {}
    }
}])

.factory('Event', function(){
    if (!eventList) {
        var eventList = []
    }
    return {
        Add: function(event){
            eventList.push(event)
        },
        List: eventList
    }
})

大家好，我試圖通過頁面刷新來持久化eventList，並且我希望得到一些關於為什么會發生這種情況的反饋！ 我寧願不使用cookies，localstorage或rootscope。 我認為我的服務設置正確，但我猜不是。 任何幫助將不勝感激！ 一切都很完美，除非我刷新頁面，我丟失了以前的所有數據。

Answer 1

在瀏覽器中刷新頁面時，Javascript變量中的所有存儲數據都將丟失。 如果需要刷新頁面，則需要將數據存儲在數據庫中，並且需要使用AJAX等方式在頁面加載時請求數據。

如果您希望更改AngularJS應用程序中的“頁面”，則應使用路由和多個視圖來模擬多個網頁。 這將使您能夠在維護服務中存儲的任何數據的同時提取不同的頁面。

查看AngularJS教程內的路由。

Answer 2

您對跨頁面狀態的選擇可以歸結為：

服務器端 - 即通過ajax從服務器持久化/檢索

客戶端：

• 餅干
• 其他狀態存儲，如flash（過時），HTML 5本地存儲，會話存儲
• 在第三方庫中包含上述內容，例如http://amplifyjs.com/api/store/

如果它的狀態非常少並且上述選項不合適，您可以在URL中對狀態進行編碼（例如，當您更改頁面時作為查詢字符串參數），但這不僅僅是最簡單的方案。

角度app / scope / rootscope中的所有內容都將在頁面刷新時丟失。

這可以看作是一件“好事”，因為它讓你有機會清除瀏覽器內存。 SPA應用程序很棒，但是繁瑣的SPA應用程序帶來了很多膨脹，並且存在單個壞腳本的風險，從而導致整個應用程序崩潰。 將SPA分解為幾個迷你應用程序有很多好處。