ウィンドウの状態を保存および取得する方法は？

Question

私は、ウィンドウの状態を格納して取り出すための関数を記述しようとしていますが、その方法を理解することはできません。アイデアは、ユーザーが画面の「スナップショット」をいつでも作成できることと、アプリに次回ログインして戻すことができ、必要な数だけスナップショットを保存できるということです。 例：ページには、いくつかの種類のフィルタとグリッド内の6つの異なるタブを持つ4つの閉じたパネルがあります（デフォルトでは、最初のタブが開きます）。今度は、4つのパネルのうち2つを開き、いくつかのフィルタを設定し、5番目のタブで作業したとしましょう。私はウィンドウ全体の状態（例えば「私の状態1」）を保存することができ、次回にログインしたときに「私の状態1」を選択してウィンドウ状態を取り戻すことができます。 私はすでに保存し、次の機能をDB内のすべてのグリッドプロパティを取得：

ストア：

$scope.state = {} 
$scope.saveStateString = function(store) { 
     $scope.state = JSON.stringify($scope.gridApi.saveState.save(store)); 
     // console.log("function save state string") 
    }; 

は、今私はのlocalStorageにウィンドウ状態を保存しようとしているため

if(objNode.folderId){ 
     eventService.singleFilter(nodeId) 
      .then(function (res) { 
        if (res.body){ 
     $scope.restoreStateString(JSON.parse(res.body)); 
       } 
      }); 
     } 
    else if (typeof objNode.folderId === "undefined"){ 
     return false 
    } 

    $scope.restoreStateString = function(restore) { 
     $scope.gridApi.saveState.restore($scope, restore); 
    }; 

を取得してみませんか次：

var storeValue = null; 
     var keyName = null; 
     var _window = {}; 


     $scope.storeWorkspace = function(){ 

      for (prop in window) 
       _window[prop] = window[prop]; 

      storeValue = JSON.stringify(_window) 

      keyName = prompt("put your key name"); 
      localStorage.setItem(keyName, storeValue); 
     }; 

このエラーが発生する

angular.js:13708 TypeError: Converting circular structure to JSON at Object.stringify (native)

円形オブジェクト私ははっきりと、理解し、私はこのエラーを取得していますなぜ、JSON原因それは受け入れていない - 「ウィンドウ」は内部に多くのオブジェクトを持っているかも私は console.log(_window)から見る自分自身を参照するオブジェクトを、そう私は質問することにしました： ウィンドウの状態を保存して取得する方法は？

Answer 1

window全体を保存しないでください。アプリケーションの状態を別のオブジェクトに保存します。

window.state = {}; // your application's state goes here 

var serializedState = JSON.stringify(window.state); // To be put into localStorage 

次回起動時にアプリを再構築するために必要なすべての情報は、このオブジェクトに含まれていることを確認していない、と以上のもの：あなたが絶対に持っている場合は、グローバルオブジェクトに添付することができますstate、それ。可能であれば、グローバルな状態を避けてください。

stateオブジェクトにはシリアル化可能なデータのみが含まれていることも確認してください。 E.g. functions or symbols cannot be serialzied to a JSON string and will get lost in the process.

Answer 2

windowオブジェクトに格納されている値の大部分は、単にシリアル化できません。これにはJSONを使用することはできません。代わりに、windowに行ったすべての変更を追跡し、それらを別のJSONオブジェクトにPOJOとして保存する必要があります。また、アプリケーションが起動するときに最初のwindowオブジェクトをコピーし、現在のwindowオブジェクトと元のコピーの間の差異だけを保存することもできます。

いずれにしても、使用しているライブラリやグローバル変数の使い方によっては、試行錯誤が必要になる可能性があります。シリアル化するときには、手動でフィルタリングする必要があるかもしれません。ベストプラクティスでははありませんはwindowオブジェクトに書き込む必要があります。 windowオブジェクトに書き込むことがある場合は、おそらくコードの動作に問題があります。

Answer 3

巨大で再利用が困難なアプリケーションデータとリソースを混在させて保存しないでください。他の問題が発生する可能性があります。

簡単にしてください！

あなたが最初のアプリの起動でセッション

localStorage.setItem("appState", appState); 

あたりの対永久に保持するために、どのくらいの時間に基づいてinternalStorage /のsessionStorageのビュー

var appState ={config:{}, data:{}}; 

ストア、それを再ロードするために必要なものとappStateオブジェクトを構築internalStorage/sessionStorageまたはserverからデータをロードし、既存のコントローラコードを変更してビューにバインドすることができます。

getApplicationData(){ 
var appState = localStorage.getItem("appState");//get it from browser storage 
if(!appState) 
    //get it from server 
return appState; 
} 

これはより堅牢で実用的なアプローチです。