here is my model

Code:
Ext.define('OfferDrive.model.StoreCategories',{
	extend:'Ext.data.Model',
	config:{
		idProperty: 'Id',
		fields:[
			{name: 'Id', type: 'int'},
			{name: 'Name', type: 'string'}
		]
	}
});
here is my store

Code:
Ext.define("OfferDrive.store.CategoryStore", {
    extend: "Ext.data.Store",
    requires: "Ext.data.proxy.LocalStorage",
    config: {
        model: "OfferDrive.model.StoreCategories",
        proxy: {
            type: 'localstorage',
            id: 'favorite-category-store'
        }
    }
});
This is my button tab event
Code:
listeners:{
				tap: function(){
					var categoryList = Ext.ComponentManager.get('categoryList');		
					var favCategoriesStore = Ext.getStore('CategoryStore');
					
					for (var i=0; i< categoryList.config.store.data.items.length; i++)
					{ 
						if(categoryList.config.store.data.items[i].data.CheckUrl.indexOf("Golden") != -1){
							var record = favCategoriesStore.findRecord('Id', categoryList.config.store.data.items[i].data.Id)
							if (null == record){
								//insert
								var newFavorite = Ext.create("OfferDrive.model.StoreCategories", {
									Id: categoryList.config.store.data.items[i].data.Id,
									Name: categoryList.config.store.data.items[i].data.Name
								});
								favCategoriesStore.add(newFavorite);
								favCategoriesStore.sync();
								alert('added');
							}
						}else{
							var record = favCategoriesStore.findRecord('Id', categoryList.config.store.data.items[i].data.Id)
							if (null != record){
								//remove
								favCategoriesStore.remove(record);
								favCategoriesStore.sync();
								alert('removed');
							}
						}
					}
					Ext.ComponentManager.get('catListModal').destroy();
				}
			}
The data is lost as soon as the page is refreshed, I cant even see the data on my chrome developer tools local storage section, I just see the table name, no data inside it