how to save and display selected option in select

[tailaitai]

 i have 4 filters

<div class="filter">
<select
name="date"
id="date"
onchange="FILTER.searchParams(event, 'sort_by_date')"
>
{% assign sort_by = collection.sort_by | default: collection.default_sort_by %}
{% for option in collection.sort_options %}
{% if option.value == 'created-ascending' or option.value == 'created-descending' %}
<option value="{{ option.value }}" {% if option.value == sort_by %}selected="selected"{% endif %}>
{{ option.name }}
</option>

{% endif %}
{% endfor %}
</select>
<select
name="brands"
id="brands"
onchange="FILTER.searchParams(event, 'filter.p.vendor')"
>
<option value="{{ collection.url }}">ALL</option>
{% for product_vendor in collection.all_vendors %}
<option value="{{product_vendor}}" {% if option.vendor == product_vendor %} selected="selected" {% endif %} >{{ product_vendor }}</option>
{% endfor %}

</select>
<select
name="category"
id="category"
onchange="FILTER.changePath(event)"
>
<option value="/collections/all">ALL</option>
{% for collection in collections %}

<option value="{{ collection.url }}">
{{ collection.title }}
</option>

{% endfor %}
</select>
<div>
<div>price</div>
<div>
<input
type="number"
name=""
id="price-min"
value="0"
onchange="FILTER.searchParams(event, 'filter.v.price.gte')"
/>

<input
type="number"
name=""
id="price-max"
value="100"
onchange="FILTER.searchParams(event, 'filter.v.price.lte')"
/>
</div>
</div>

and when i select option in selector, i need to save option and display it when my page refresh and displaying current filter

js code:

window.FILTER = {
searchParams: function (event, param) {
const { value } = event.target;

const url = new URL(window.location);
url.searchParams.set(param, value);

window.location = url;
},
changePath: function (event) {
const { value } = event.target;

window.location.pathname = value;
},
};

[made4Uo]

@tailaitai,

What do you mean by saving? Saving it for the user or for the store owner?

If it is for the user. You can use the localStorage or sessionStorage or cookies. 

If it is for the owner of the website, that will be a little complicated. 

You can assign a div to call and replace innerHtml or innerText with the value.