Save form data to cookie and popular form with this data after page re-load

Question

I have a page with filters, being 4 selects, an input search, 2 input date and a Submit, I need to keep the data selected after page Reload.

In other words, I put the data to filter and after clicking on the Ubmit and the page load it precisely to keep the form values as selected before the Ubmit.

At first I’m saving in cookie with the code below, but despite saving the cookies blz I wonder if there’s any way to decrease this code? Like instead of using one $.cookie for each input, use one for the whole form.

And I would also like to know how to popular the form again with the cookie data and if this can not cause me problems it getting stored, have to delete cookies after using them?

$(".searchButton").on("click", function () {
	$.cookie('frachiseesValue', $("#frachisees_filter").val());
	$.cookie('schoolsValue', $("#schools_filter").val());
	$.cookie('challengeValue', $("#post_challenges_filter").val());
	$.cookie('statusValue', $("#statuses_filter").val());
	$.cookie('searchValue', $("#filter_search").val());
	$.cookie('startDateValue', $("#startDate").val());
	$.cookie('endDateValue', $("#endDate").val());
});

Update

NOTE: This is being saved in the cookie (dos select) the id corresponding to the option and not the string.

Answer 1

To load select, do so.

1- Load select fields (all entries in select)

$(function(){
    $("#frachisees_filter").val($.cookie('frachiseesValue'));
	$("#schools_filter").val($.cookie('schoolsValue'));
});

And so successively for all other selects