javascript - 如何存储和检索窗口状态？

Question

我正在尝试编写用于存储和检索窗口状态的函数，但不知道该怎么做。这个想法是用户可以随时制作屏幕的“快照”，下次登录应用程序时他可以取回它，他也可以存储任意数量的快照。例如:在页面上，我有 4 个不同的带有某种过滤器的封闭面板和 6 个内部带有网格的不同选项卡(默认情况下第一个选项卡打开)。现在假设，我打开了 4 个面板中的 2 个，设置了一些过滤器并使用了第 5 个选项卡。我希望能够存储整个窗口状态(例如“我的状态 1”)，当我下次登录时，只需选择“我的状态 1”并取回我的窗口状态。我已经使用下一个函数在数据库中存储和检索所有网格属性:

商店:

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

检索

    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

不要将应用程序数据和资源混合存储，它巨大，难以重用并且会导致遇到其他问题。

保持简单!

使用重新加载 View 所需的内容构造 appState 对象

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

根据您永久保留多长时间与每个 session 将其存储在 internalStorage/sessionStorage 中

localStorage.setItem("appState", appState);

在初始应用程序启动逻辑上，从 internalStorage/sessionStorage 或服务器加载数据，您可以修改现有的 Controller 代码以将其绑定(bind)到 View 。

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

这是一种更健壮和高效的方法。