save multiple states of grid in Localstorage

[queensgambit9]

Hi

Im using the saveState and loadState functions which works fine. Now I would like to have the possibility to save and load different states.
Example: I save current state with a user input name which then will be available in a loadstate dropdown. This mean the user can save states and then choose to load a certain state. Preferably also with the possibility to rename or delete a state.

Would that be possible and how could a solution for that look like?

Thanks.

[paramvir]

saveState( { save: false } ) returns a string which you can name and save it in an object.

Code: [Select]

var saveStates = {
  key1: saveState1,
  key2: saveState2,
  key3: saveState3,
  ...
}

In the dropdown add the name of states as options

When the user selects key1, call loadState( { state: saveStates[ 'key1' ]  }) to load corresponding state.

[queensgambit9]

I save different states to local Storage with different keys.
How can I read these and populate dropdown on page load?

http://jsfiddle.net/rcw7114y/

Thanks.

[paramvir]

Please check this:

http://jsfiddle.net/rcw7114y/1/

[queensgambit9]

Thanks. Would it be possible to populate the drop down with all states available from local storage on page load?

[paramvir]

yes, please check this

http://jsfiddle.net/rcw7114y/2/

[queensgambit9]

Having an issue...after you enter name of the state (new, does not exist) the select visible column gets "destroyed"...?

http://jsfiddle.net/rcw7114y/3/

[queensgambit9]

Also, been trying to add a text instead of the localStorage key name to be displayed in the dropdown...how can I add the text when pushing the item to options array?

[paramvir]

Please check this:

http://jsfiddle.net/rcw7114y/4/

[queensgambit9]

Great, thanks.
If I would like to load state from qs, like: pq.html?state=statename, where should I execute the loadstate?

Have something like this:

Code: [Select]

var state = localStorage.getItem(prefix() + qsState);
          this.loadState({
            state: state
          })

No success though and can I load it by a more efficient way (The dropdown should be selected with the state from qs also)?

[queensgambit9]

Solved.

[queensgambit9]

Afraid not 
Having problems with pqSelect filters
The information is correct in the local storage value. Seems it doesn't get refreshed when I execute the loadstate for qs load?

 

Code: [Select]

create: function() {
     
    var state = localStorage.getItem(prefix() + qsState);
           
         this.loadState({
            state: state
          })

refreshToolbar(this);
$("#loadState").val(qsState);
}

[queensgambit9]

To clarify, I use ?state=state as qs and want the state to be loaded...and it does but the filters with pqselect does not get updated...

http://jsfiddle.net/fwmLo4jd/1/

[paramvir]

Let's make the filters work with localStorage first as this post is about localStorage

Please check this: http://jsfiddle.net/mo6p4uvt/

[queensgambit9]

Great, thanks.