PDA

View Full Version : Simple localStorage state Provider



Chris_S
19 Jun 2010, 10:12 AM
I wanted a state provider for localStorage, and I was surprised when I couldn't find one. Here it is for anyone else who needs it. Including this code automatically sets the provider to localStorage if available or falls back to a cookie if not. Criticism is welcome, it really seems too easy so I wouldn't be surprised if I missed something...



Ext.ns('Ext.ux.state')

Ext.ux.state.LocalStorage = function(config){
Ext.ux.state.LocalStorage.superclass.constructor.call(this);
Ext.apply(this, config);
this.state = localStorage;
};

Ext.extend(Ext.ux.state.LocalStorage, Ext.state.Provider, {
get : function(name, defaultValue){
if (typeof this.state[name] == "undefined") {
return defaultValue
} else {
return this.decodeValue(this.state[name])
}
},
set : function(name, value){
if(typeof value == "undefined" || value === null){
this.clear(name);
return;
}
this.state[name] = this.encodeValue(value)
this.fireEvent("statechange", this, name, value);
}
});

if (window.localStorage) {
Ext.state.Manager.setProvider(new Ext.ux.state.LocalStorage())
} else {
var thirtyDays = new Date(new Date().getTime()+(1000*60*60*24*30))
Ext.state.Manager.setProvider(new Ext.state.CookieProvider({expires: thirtyDays}))
}

lvgunst
21 Jan 2011, 4:40 AM
I edited your code a little to use a prefix in the localStorage name like the CookieProfider does:



Ext.ns('Ext.ux.state')

Ext.ux.state.LocalStorage = function(config) {
Ext.ux.state.LocalStorage.superclass.constructor.call(this);
Ext.apply(this, config);
// get all items from localStorage
this.state = this.readLocalStorage();
};

Ext.extend(Ext.ux.state.LocalStorage, Ext.state.Provider, {
namePrefix: 'ys-',

set: function(name, value) {
if (typeof value == "undefined" || value === null) {
this.clear(name);
return;
}
// write to localStorage
localStorage.setItem(this.namePrefix + name, this.encodeValue(value));
Ext.ux.state.LocalStorage.superclass.set.call(this, name, value);
},
clear: function(name) {
localStorage.removeItem(this.namePrefix + name);
Ext.ux.state.LocalStorage.superclass.clear.call(this, name);
},

readLocalStorage: function() {
var data = {};
for (i = 0; i <= localStorage.length - 1; i++) {
name = localStorage.key(i);
if (name && name.substring(0, this.namePrefix.length) == this.namePrefix) {
data[name.substr(this.namePrefix.length)] = this.decodeValue(localStorage.getItem(name));
}
}
return data;
}
});

if (window.localStorage) {
Ext.state.Manager.setProvider(new Ext.ux.state.LocalStorage({namePrefix:'my-'}))
} else {
var thirtyDays = new Date(new Date().getTime()+(1000*60*60*24*30))
Ext.state.Manager.setProvider(new Ext.state.CookieProvider({expires: thirtyDays}))
}

gabrieaj
9 Mar 2012, 4:57 AM
Hi,

We are using extjs 3.4 and trying to leverage HTML 5 local storage.
In our application, we have editor grid and user modifies these data. The modified data should be able to get stored locally. So once the user comes back to the page, he would be able to see the modified. Grids are created in dynamic way.

I hope i can give a try to use you plugin.
Please could you provide an example for the usage.

Thanks & Regards,