Cookie Plugin for Sencha Touch (using LocalStorage)

[preyz]

It's time for me to give a little back to the community. I've created this Plugin to provide cookie-like functionality in Sencha Touch.

/*
// Usage (for example in your application controller):

// Initialize
app.cookie = new Ext.util.LocalStorageCookie();

// Initialize with config
app.cookie = new Ext.util.LocalStorageCookie({
	proxyId: 'com.mydomain.cookies',
});

// Set a value
app.cookie.set('some_setting', 'some_value');

// Get a value
app.cookie.get('some_setting');

*/
Ext.util.LocalStorageCookie = Ext.extend(Object, {
  
  proxyId: 'com.domain.cookies',
  
  constructor: function(config) {
    
    this.config = Ext.apply(this, config);
    
    // Create the cookie model
    Ext.regModel('LocalStorageCookie', {
      fields: [
        'id',
        'key',
        'value',
      ],
      proxy: {
        type: 'localstorage',
        id: this.proxyId,
      }
    });
    // Create the cookie store 
    this.store = new Ext.data.Store({
      model: "LocalStorageCookie",
    });    
    this.store.load();
  },
  
  // Get function
  get: function(key) {
    var indexOfRecord = this.store.find('key', key);
    if (indexOfRecord == -1) {
      return indexOfRecord;
    }
    else {
      var record = this.store.getAt(indexOfRecord);
      return record.get('value');
    }
  },
  
  // Set function
  set: function(key, value) {
    var indexOfRecord = this.store.find('key', key);
    if (indexOfRecord == -1) {
      var record = Ext.ModelMgr.create({key:key, value:value}, 'LocalStorageCookie');
    }
    else {
      var record = this.store.getAt(indexOfRecord);
      record.set('value', value);
    }  
    return record.save();
  },  
});

The plugin uses local storage to save it's data. Unfortunately I couldn't use the id-field directly for the key value, which made the get/set methods slightly more complicated than necessary. The reason can be found in this bug-report: http://www.sencha.com/forum/showthre...d-doesn-t-work

Besides the id-field problem with local storage, I am new to developing Sencha Touch plugins. So any feedback with regards to code structure, naming convention etc. is much appreciated.

[perry_jia]

great, thank you

[elad101]

Hi,
What should I put in proxyId: "com.mydomain.cookies" ?
I tried proxyId:'com.http://secure.staging-first-services-games.com.cookies'
But It didn't work out..
Thanks,

[kavih7]

Hi preyz. Thanks for your plugin, works great! I've tightened things up a bit and also added support for removing items from the local storage. Here's what I've got with my changes in red:

/*
// Usage (for example in your application controller):

// Initialize
app.cookie = new Ext.util.LocalStorageCookie();

// Initialize with config
app.cookie = new Ext.util.LocalStorageCookie({
	proxyId: 'com.mydomain.cookies',
});

// Set a value
app.cookie.set('some_setting', 'some_value');

// Get a value
app.cookie.get('some_setting');

*/
Ext.util.LocalStorageCookie = Ext.extend(Object, {
  
  proxyId: 'com.domain.cookies',
  
  constructor: function(config) {
    
    this.config = Ext.apply(this, config);
    
    // Create the cookie model
    Ext.regModel('LocalStorageCookie', {
      fields: [
        'id',
        'key',
        'value',
      ],
      proxy: {
        type: 'localstorage',
        id: this.proxyId,
      }
    });
    // Create the cookie store 
    this.store = new Ext.data.Store({
      model: "LocalStorageCookie",
    });    
    this.store.load();
  },
  
  // Get function
  get: function(key) {
    var indexOfRecord = this.store.find('key', key, 0, false, true, true); //<-- Forcing exact matching
    if (indexOfRecord == -1) {
      return null; //<-- returning null, since "-1" may be a valid and expected value from the store?
    }
    else {
      var record = this.store.getAt(indexOfRecord);
      return record.get('value');
    }
  },
  
  // Set function
  set: function(key, value) {
    var indexOfRecord = this.store.find('key', key, 0, false, true, true); //<-- Forcing exact matching
    if (indexOfRecord == -1) {
      var record = Ext.ModelMgr.create({key:key, value:value}, 'LocalStorageCookie');
    }
    else {
      var record = this.store.getAt(indexOfRecord);
      record.set('value', value);
      this.store.sync(); //<-- Syncing for good measure, may not be necessary
    }  
    return record.save();
  },

  //Added functionality to remove cookies from local storage
  del: function(key)
  {
    var indexOfRecord = this.store.find('key', key, 0, false, true, true);
    if (indexOfRecord == -1) {
      return false;
    }
    else {
      var record = this.store.removeAt(indexOfRecord);
      this.store.sync();
      return true;
    }
  }
});

Thanks again!

[jujube]

I realize this is an incredibly amateurish question, but how exactly do I load this into my application? I seem to be getting errors with both methods I've tried (Ext.Loader & Ext.require), and can't really find any decent documentation referring to loading plugins. Any help much appreciated! Thanks.