提问：如何设计含复杂数据客户端存储交互的前端架构

最近，在做一个前端在线的编辑器web程序。开发过程中，有很多前端缓存数据，数据的逻辑处理，并且还有很多的状态更新。

因没有用一些mvvm框架，暂时处理的方式如下：

1.数据缓存：

数据缓存都放在localStorage里，每次发布的时候，会向服务器发送更新数据，页面打开或者刷新的时候，会从服务器拉数据更新本地缓存。也就是说，所有数据流转，都是围绕着缓存的读与取。

2.实体对象：

一些常用的交互对象，我采取逐个封装成javascript对象model，存到body的data属性里面（因为是单页面）；并写了工具类专门去存取model值；(这里当对象的属性特别多的时候，真的快把我弄疯了)

3.问题：

但是感觉太烦了，每次需要更新值的时候，都要先取一遍，为了保证其他地方引用的时候能实时，更新值过后必须要再存下，想求教有木有更好的方式？
类似下面结构：

//factory 伪代码
var ResourceFactory = (function(){

    var defaultXXXValue = {
        status:'0',
        updateTime:new Date()
    }

    function ResourceFactory(){}

    ResourceFactory.prototype.setXXX = function(value){
        LocalStorage.set('XXX',value||defaultXXXValue);
    }

    ResourceFactory.prototype.getXXX = function(){
        LocalStorage.set('XXX',value||defaultXXXValue);
    }

    ResourceFactory.prototype.setXXX1 = ...

    ResourceFactory.prototype.getXXX1 = ...

    //...

    return ResourceFactory;
})


//调用伪代码
var resourceFactory = new ResourceFactory();
var resource = resourceFactory.getResource();
resource.status='1';
resource.updateTime = 'XXX';
//....
resourceFactory.setResource(resource);

5.解决方案

待定…