使用函数将JSON解析为javascript对象

使用函数将JSON解析为javascript对象,json,knockout.js,local-storage,javascript,recursive-datastructures,Json,Knockout.js,Local Storage,Javascript,Recursive Datastructures,我有一个看起来很复杂的问题,我不知道如何解决 我的单页应用程序使用knockoutJS,每当我的一个输入值在视图上更改时,我都希望缓存我的视图模型 问题在于我的视图模型的复杂性。要使用本地存储,我需要对对象进行字符串化,但它有递归值。我有一些逻辑来处理这个问题,并将我的对象字符串化。但是当我试图将JSON字符串解析回一个对象时,我丢失了我的函数 function cacheForm(agency) { //var serialized = stringifyOnce(agency

我有一个看起来很复杂的问题,我不知道如何解决

我的单页应用程序使用knockoutJS,每当我的一个输入值在视图上更改时,我都希望缓存我的视图模型

问题在于我的视图模型的复杂性。要使用本地存储,我需要对对象进行字符串化,但它有递归值。我有一些逻辑来处理这个问题,并将我的对象字符串化。但是当我试图将JSON字符串解析回一个对象时,我丢失了我的函数

function cacheForm(agency) {
        //var serialized = stringifyOnce(agency);
        //var serialized = amplify.store("Agency", agency);#
        //var obj = new Object();
        //obj.test = "test";

        value = agency;

        var cache = [];
        parsed = JSON.stringify(value, function (key, value) {
            if (typeof value === 'object' && value !== null) {
                if (cache.indexOf(value) !== -1) {
                    // Circular reference found, discard key
                    return;
                }
                    // Store value in our collection
                    cache.push(value);
            }

            return value;
        });

        //var jsonString = JSON.stringify(cache);


        //cache = null; // Enable garbage collection

        var parsedRecursive = "{" + '"data"' + ":" + parsed + "," + '"expires"' + ":" + null + "}"; // Build the string based on how amplify likes it

        var obj = eval('(' + parsed + ')')

        var obj = jQuery.parseJSON(parsedRecursive);
        //// Put the object into storage
        //localStorage.setItem('Agency', parsedRecursive);

        myData = JSON.parse(parsedRecursive, function (key, value) {
            var type;
            if (value && typeof value === 'object') {
                type = value.type;
                if (typeof type === 'string' && typeof window[type] === 'function') {
                    return new (window[type])(value);
                }
            }
            return value;
        });

        //// Retrieve the object from storage
        //    var retrievedObject = localStorage.getItem('Agency');

        //    var obj = jQuery.parseJSON(parsedRecursive);

        //var agency2 = mapping.fromJS(obj);
        //agency;
        //amplify.store("Agency", agency);
        //amplify.store("Obj", obj);
        //var store = amplify.store(); // Look at all items by not providing a key
    }
});
我尝试使用eval,但它返回了一个没有我的数据的对象。为了帮助您理解这是我的视图模型的样子,它是cachForm的代理参数

我还尝试使用amplify,但由于我的视图模型结构,我遇到了相同的问题

我还附上了一些截图,以显示代码中我的viewmodel发生了什么


缓存整个viewModel不是一个好主意。viewModel包含可观察对象、计算对象和函数或事件处理程序。 最好缓存视图模型数据,仅缓存原始数据

viewModel = ko.mapping.fromJS(viewModel);
关于序列化:

因此,只需序列化视图数据(使用):

为了重建正确的视图模型,最好具有初始化功能。 这是您的视图模型构造函数,即添加事件处理程序、函数和计算结果的函数

  var initializer  = your_constructor;
您还需要确定缓存密钥,例如页面路径

  var cacheItem = {data : json, constructor : initializer};
  cache[key] = cacheItem;
关于反序列化:

获取缓存项:

var cacheItem = cache[key];
var viewModel = JSON.parse(cacheItem.data);
现在viewModel包含原始数据

viewModel = ko.mapping.fromJS(viewModel);
这些特性被转换成可观测的

如果有构造函数,就调用它

if(cacheItem.constructor)
     cacheItem.constructor.call(viewModel);
然后,视图模型与存储的视图模型相同


我希望能有所帮助。

这是我在另一篇帖子中发布的答案。它们都是相关的


您的代码和问题很难理解。能否请您编辑您的问题,删除与问题无关的代码和注释,或者详细说明一下您对代码的期望以及代码不符合要求的原因?帮助我们重新处理您的问题,将使我们更容易帮助您。@Jeroen我将更改我的问题,使其更容易理解。基本上,我想使用HTML5本地存储缓存我的视图模型。无论是使用普通JavaScript还是像Amplify这样的库,我都会给你一个建议,试试看它是否有效。以前,当我的数据更简单时,我能够缓存整个视图模型,但这可能不是最好的解决方案。