state persistence on ui

Question

Here I am posting my problem statement.

User select option from drop down. Selected value appears on page. But, when user refresh the page then that selected value disappears from page.

I need that that value should be what I selected before refresh the page. Is this possible using js/jquery.

Please guide me how I can achieve this!

Regards

Is there a server side component to your site (this may be a better place to persist this if there is)? — Paddy, Jul 06 '12 at 08:29
@Paddy that might be a bit heavy, wouldn't it? Would you recommend an account-like setup? — DZittersteyn, Jul 06 '12 at 08:33
You can use localStorage or sessionStorage. http://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage — Pramod, Jul 06 '12 at 08:36
@DZittersteyn - was just a question. If there was already a server side method, then it may have been more appropriate, but if not, then cookies etc. is what you get. — Paddy, Jul 06 '12 at 08:48

score 3 · Answer 1 · answered Jul 06 '12 at 08:36

You have several solutions to do this.

Every time the user selects an option, send a http request to the server with the selected option. When the user refreshes the page, the jsp will use the collected info to pre-select the option. A common $.get in jQuery will do the trick client-side.
Set up a cookie with the selected option. When the page is refreshed, get the cookie value and use it to pre-select the option. You don't need jQuery to do this, but it may help.
If the browser supports it, use localStorage instead of cookies. It's a client-side only solution, so the info won't be sent to the server.
Set up the hash of the URL to store the option:

location.replace("#option=" + val);

You can retrieve the value when the page is refreshed using location.hash.

score 0 · Answer 2 · answered Jul 06 '12 at 08:32

You have a couple of options here:

You can set a cookie using jQuery which saves the previous state. A nice tutorial can be found here: http://www.electrictoolbox.com/jquery-cookies/

you could also encode the options in the url with a query string. Some info about that can be found on wikipedia: http://en.wikipedia.org/wiki/Query_string

Which of the two you want is up to you, cookies are the way to go if you want the settings to persist if the user leaves the page and visits another time, the query string is more useful to prevent refreshing from clearing your settings.

score 0 · Answer 3 · answered Jul 06 '12 at 08:32

0

Using the cookie plugin (http://plugins.jquery.com/project/Cookie):

$("#MyList").change(function() {
    //Set a cookie with selected value on change.
    $.cookie("SelectedItem", $(this).val());
});

$(document).load(function() {
    //On load, set the selected item from the cookie.
    $("#MyList").val($.cookie("example")); 
});

answered Jul 06 '12 at 08:32

Paddy

33,309
15
79
114

thanks for your reply! your solution will be failed when cookie is not enabled. – S Singh Jul 06 '12 at 08:43
That is correct, but this is why it's hard to persist stuff on the client side... – Paddy Jul 06 '12 at 08:47

state persistence on ui

3 Answers3