Question

我正在尝试编写用于存储和检索窗口状态的函数，但无法弄清楚如何执行此操作。这个想法是用户可以随时制作屏幕的“快照”，并且下次登录应用程序时他可以将其检索回来，也可以存储他想要的尽可能多的快照。例如：在页面上，我有4个不同的封闭面板，带有某种过滤器和6个带有网格的不同标签（默认情况下，第一个标签打开）。现在让我们说，我打开了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")
   };

提取

    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 );
     };

现在我正在尝试将窗口状态存储在localstorage中并执行下一步：

 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：将循环结构转换为JSON at Object.stringify（native）

我清楚地明白，为什么我得到这个错误，它导致JSON不接受圆形对象 - 引用自己的对象也是我从中看到的 console.log(_window)“窗口”里面有很多物体，所以我决定问：如何存储和检索窗口状态？

Answer 1

Don't mix application data and resources to store, its huge, hard to reuse and will lead to running into other issues.

Keep it simple!

Construct appState object with what you required to reload the views

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

Store it in internalStorage / sessionStorage based on how long you to retain forever vs per session

localStorage.setItem("appState", appState);

On initial app start logic, load data from internalStorage / sessionStorage or server and you may modify existing controller code for binding it to the view.

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

This is more robust and performant approach.

Answer 2

Do not try to store the whole window. Store your application's state in a separate object, e.g. state, which you can then attach to the global object if you absolutely have to:

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

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

Make sure that all the information you need to rebuild your app during the next launch is contained in this object, and nothing more than that. Avoid global state where possible.

Also make sure that your state object only contains serializable data. E.g. functions or symbols cannot be serialzied to a JSON string and will get lost in the process.

Answer 3

The vast majority of values stored on the window object are simply not serializable. You will not be able to use JSON for this. You should instead track all changes you make to window and store those in a separate JSON object as POJOs. Alternatively, you can copy the initial window object when your application starts and then only store the differences between the current window object and the original copy.

In any case, this is probably going to be a hunt of trial and error, depending on what libraries you are using, and how they are using global variables. You will probably find you need to manually filter out some stuff when you serialize. Best practices would suggest nothing should write to the window object. If you have things writing to the window object, you're probably dealing with badly behaving code.

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

3 个答案: