Cascading Dropdowns with storage to Local Storage - select

Question

Am trying to save Cascading dropdown options to local storage, and am coming up with a few issues:
-The dropdowns are registered in Localstorage when changed, but they are not saving on refresh
-They are not being retrieved (probably because of the former issue).
Here's a link to the testing site:
https://www.flighteducation.co.uk/Panelcraft/Bespoke.php
Here is the script for the cascading dropdowns:
var subjectObject = {
"WALL": {
"NON FIRE RATED": ["BEADED", "NON-BEADED"],
"FIRE RATED 1 HOUR": ["BEADED", "NON-BEADED"],
"FIRE RATED 2 HOUR": ["BEADED", "NON-BEADED"],
},
"CEILING": {
"NON FIRE RATED": ["BEADED", "NON-BEADED"],
"FIRE RATED 1 HOUR": ["BEADED", "NON-BEADED"]
}
}
window.onload = function() {
var subjectSel = document.getElementById("subject");
var topicSel = document.getElementById("topic");
var chapterSel = document.getElementById("chapter");
for (var x in subjectObject) {
subjectSel.options[subjectSel.options.length] = new Option(x, x);
}
subjectSel.onchange = function() {
chapterSel.length = 1;
topicSel.length = 1;
for (var y in subjectObject[this.value]) {
topicSel.options[topicSel.options.length] = new Option(y, y);
}
}
topicSel.onchange = function() {
chapterSel.length = 1;
var z = subjectObject[subjectSel.value][this.value];
for (var i = 0; i < z.length; i++) {
chapterSel.options[chapterSel.options.length] = new Option(z[i], z[I]);
}
}
}
   
The code for local storage looks like this:
let options = [position, fire, frame];
for (let i = 0; i < options.length; i++) {
if (window.localStorage.getItem('dropdownValue') === options[i].value) {
options[i].setAttribute('selected', 'selected');
}
}
$(function () {
$('#number').change(function () {
localStorage.setItem('BespokeOrderInput', this.value);
});
if (localStorage.getItem('BespokeOrderInput')) {
$('#number').val(localStorage.getItem('BespokeOrderInput')).trigger('change');
}
});
$(function () {
$('#subject').change(function () {
localStorage.setItem('BespokeOrderForm1', this.value);
});
if (localStorage.getItem('BespokeOrderForm1')) {
$('#subject').val(localStorage.getItem('BespokeOrderForm1')).trigger('change');
}
});
with the $(function) being repeated for each item
the code looks like this for each dropdown (id being different for each)
<select class="list-dropdown" name="chapter" id="chapter">
<option id="frame" value="" selected="selected">PLEASE SELECT FIRE RATING FIRST</option>
</select>
The inputs for the numbers are saving and retrieving with no problem, but as mentioned above dropdowns are not working.
Very new to Localstorage stuff, and I appreciate anyone's time!
thanks