Keep the last selected option in a select after refreshing JQuery

Question

I have a list of cars and a select list that contains car brands and "all", when choosing an option I filter cars based on their brands. e.g when I choose "Mercedes" only Mercedes' cars are displayed, and we I choose all, all the cars are displayed. (It all works just fine).

When I refresh the page I want the list to be filtered based on the last option I chose (before refreshing) and not all the list again. I'm wondering if there's a way to do this on the client side without in need of server side work. I just need to mention that my question is not about the "onchange" function but about storing the last chosen option.

Check out this question http://stackoverflow.com/questions/1458724/how-do-i-set-unset-cookie-with-jquery. — Ozgar, May 15 '17 at 14:21
You store your selection option value in a cookie and when you load the page, it would look for the cookie and use it's value, if it exists. If not then you just show all like normal — Huangism, May 15 '17 at 14:21

score 2 · Accepted Answer · answered May 15 '17 at 15:03

If you only need it to persist across page refreshes, not different browser sessions, then use the sessionStorage api:

// When changing the filter
var filter = 'Mercedes';
sessionStorage.setItem('last-filter', filter);

// When loading the page (document.ready)
var filter = sessionStorage.getItem('last-filter') || 'all';
if (filter !== 'all') {
    changeFilter(filter);  // your function
}

Only strings can be stored directly. Instead of storing an element, store its element id/class instead. To store other objects, use the JSON.stringify function on your data to serialise it to a string.

If you ever decide you would like the filter to persist across eg browser crashes, then it's easy to switch in the fully compatible localStorage api. Items in localstorage have no specific expiration date, so if expiry is desirable then you'd need to also save the filter date to detect and remove stale items yourself.

Exactly what I was looking for ! Thanks ! – Elmehdi93 May 15 '17 at 15:18 — Elmehdi93, May 15 '17 at 15:18

Keep the last selected option in a select after refreshing JQuery

1 Answers1