javascript - 重新启动应用程序时数据存储的更改丢失

Question

我创建了一个 ExtJS Web 应用程序。我有一个 JSON 文件，其中包含一些数据。我创建了一个数据存储并从 JSON 加载数据。我还将数据存储与网格绑定(bind)。网格完美地显示了数据。

现在我想更新网格中的某些元素，同时 json 中的数据也会更新。

当有人点击按钮时，我使用了以下代码:

var grid = Ext.getCmp('PersonListing');
var store = Ext.getStore('PersonDataStore');
store.each(function(record,idx){
      val = record.get('Name');
      if(val == "Jon"){
         record.set('Name','David');
      }

      record.commit();
});
console.log(store);
grid.reconfigure(store);

现在，一旦执行此代码，我就可以看到数据网格中的名称发生了变化。但如果我刷新应用程序或重新启动它，更改就会丢失。json 文件中的数据不会被修改。为什么会出现这种情况？我如何实现这一点以使更改得以持久？

<小时/>

这是商店的代码

Ext.define('PersonListing.store.PersonDataStore', {
    extend: 'Ext.data.Store',
    alias: 'store.personstore',

    requires: [
        'PersonListing.model.PersonData',
        'Ext.data.proxy.Ajax',
        'Ext.data.reader.Json'
    ],

    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            storeId: 'PersonDataStore',
            autoLoad: true,
            model: 'PersonListing.model.PersonData',
            proxy: {
                type: 'ajax',
                url: 'data/people.json',
                reader: {
                    type: 'json',
                    rootProperty: 'data'
                }
            }
        }, cfg)]);
    }
});

Answer 1

您的应用程序服务器需要实现所有 CRUD 运算符，特别是 data/people.json 路由的 POST 请求处理程序。

默认情况下，Ajax 代理使用以下 HTTP 方法进行 CRUD:

{创建:'POST'，读取:'GET'，更新:'POST'，销毁:'POST'}

如果您想覆盖此行为，请设置 actionMethods 属性。

http://docs.sencha.com/extjs/6.0/6.0.1-modern/#!/api/Ext.data.proxy.Ajax

来自评论:

要使用本地存储代理，请将代理类型设置为localstorage:

 constructor: function(cfg) {
    var me = this;
    cfg = cfg || {};
    me.callParent([Ext.apply({
        storeId: 'PersonDataStore',
        autoLoad: true,
        model: 'PersonListing.model.PersonData',
        proxy: {
            type: 'localstorage',
        }
    }, cfg)]);
}

要使用 JSON 初始化本地存储，请在开始时发出 Ajax 请求，并将存储数据设置为请求。

 // Modify to match your JSON format
 Ext.Ajax.request({
      url: 'data/people.json',
      success: function(response){
         var responseObj = Ext.decode(response.responseText);
         var store = Ext.getStore('PersonDataStore');
         Ext.each(responseObj, function(object) {

             // assumes a specific type of response object
             var record =  Ext.create('PersonListing.model.PersonData', object);                        
             store.add(record);                             
         });
         store.sync();
       }
 });