Web 如何在ExtJS中声明静态HashMap?

Web 如何在ExtJS中声明静态HashMap?,web,extjs,data-structures,hashmap,Web,Extjs,Data Structures,Hashmap,要求: 需要使用HashMap来存储特定的值。 这些值第一次被设置到HashMap,在屏幕刷新后或在导航时返回到同一屏幕,需要在UI本身的HashMap中保留值,而无需进行后端/DB调用 声明和使用此HashMap的最佳方法是什么,以便它只初始化一次,但在屏幕刷新和导航时保留附加值 我们如何声明和初始化这个HashMap作为一个静态变量?您可以使用带有本地存储代理的ExtJS存储部分实现它。 本地存储允许您在浏览器空间中存储数据。在页面重新加载时,数据将持久化(仅在浏览器中的同一用户配置文件中)

要求:

需要使用HashMap来存储特定的值。 这些值第一次被设置到HashMap,在屏幕刷新后或在导航时返回到同一屏幕,需要在UI本身的HashMap中保留值,而无需进行后端/DB调用

声明和使用此HashMap的最佳方法是什么,以便它只初始化一次,但在屏幕刷新和导航时保留附加值


我们如何声明和初始化这个HashMap作为一个静态变量?

您可以使用带有本地存储代理的ExtJS存储部分实现它。 本地存储允许您在浏览器空间中存储数据。在页面重新加载时,数据将持久化(仅在浏览器中的同一用户配置文件中)

此存储数据在其他浏览器中不可用。如果您正在寻找跨浏览器工作的HTTP响应的特定于用户的缓存,那么它必须位于服务器端

以下是针对相同浏览器和相同用户配置文件的POC实现:

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.define('twitter', {
            extend: 'Ext.data.Model',
            fields: ['id', 'name'],
            proxy: {
                type: 'localstorage',
                id: 'twitter-Searches'
            }
        });

        //our Store automatically picks up the LocalStorageProxy defined on the Search model
        var store = new Ext.data.Store({
            model: "twitter"
        });

        //loads any existing Search data from localStorage
        store.load();

        console.log(store);

        Ext.create('Ext.panel.Panel', {
            renderTo: Ext.getBody(),
            items: [{
                xtype: 'grid',
                store: store,
                id: 'gridId',
                columns: [{
                    text: 'id',
                    flex: 1,
                    dataIndex: 'id'
                }, {
                    text: 'name',
                    flex: 1,
                    dataIndex: 'name'
                }],
                buttons: [{
                    text: 'Add new record',
                    handler: function () {
                        var grid = Ext.getCmp("gridId");
                        var record = {
                            //id: Math.random().toString(36).substring(7),
                            name: Math.random().toString(36).substring(7)
                        };

                        store.add(record);
                        store.sync();
                    }
                }, {
                    text: "Clear all",
                    handler: function () {
                        var grid = Ext.getCmp("gridId");
                        store.removeAll();
                        store.sync();

                    }
                }]
            }]
        });
    }
});
这里有同样的小提琴:


在Fiddle中,重新加载Fiddle时,将从本地存储中提取数据。

您使用的是哪个ExtJS版本?ExtJS版本为5.0是的,此解决方案部分有效。但是,如果我在不同的浏览器或系统中加载相同的屏幕,它将不再适用。不过谢谢你的帮助,它解决了我目前面临的一个完全不同的问题。