I have a problem with options after re-opening browser - radio-button

Question

I am having difficulty understanding what is going on with Options and radio button settings after closing and re-opening a browser with "continue where I left off" set. Chrome & Edge both behave the same way.
I want EITHER to get javascript to behave according to how the option and radio buttons are displaying OR force the option and radio buttons to display default values (i.e. to match the values that javascript thinks are set).
What I am doing:-
a) I change the radio button to Radio Button 2. I close the browser and re-open it. The radio button indicates Radio Button 1. Javascript also behaves as though Radio Button 1 is checked. All OK.
b) I change the option to Option 2, change the radio Button to Radio Button 2. I close the browser and re-open it. The radio button indicates Radio Button 1. Javascript also behaves as though Radio Button 1 is checked. The option continues to display as Option 2, but javascript indicates that option 1 is selected.
c) I change the radio Button to Radio Button 2, change the option to Option 2. I close the browser and re-open it. The radio button indicates Radio Button 2. Javascript behaves as though Radio Button 1 is checked. The option continues to display as Option 2, but javascript indicates that option 1 is selected.
This is all quite unexpected, and I don't see how to force the option and radio buttons to indicate their selected values. This only ever happens after closing and re-opening the browser.
My code is here
<select id="sel">
<option value=1 selected>Option 1</option>
<option value=2>Option 2</option>
<option value=3>Option 3</option>
</select>
<p>Radio Buttons<br/>
<input type="radio" id="r1" name="rb" value="rb1" checked> Radio Button 1
<input type="radio" id="r2" name="rb" value="rb2"> RadioButton 2
</p>
<span id="debug"></span>
<script>
debug();
function debug(){
var e=document.getElementById("sel");
var rb1val = document.getElementById("r1").checked;
document.getElementById("debug").innerHTML="Option "+e.options[e.selectedIndex].value+" is selected. Radio Button 1 is "+rb1val;
document.getElementById("r1").value;
}
</script>

Answer 1

After much searching, I have found the unlikely answer.
The problem goes away by enclosing the elements in a form with autocomplete="off":-
<form autocomplete="off">
<select id="sel" onchange="debug()">
<option value=1 selected>Option 1</option>
<option value=2>Option 2</option>
<option value=3>Option 3</option>
</select>
<p>Radio Buttons<br/>
<input type="radio" id="r1" name="rb" value="rb1" checked onchange="debug()"> Radio Button 1
<input type="radio" id="r2" name="rb" value="rb2" onchange="debug()"> RadioButton 2
</p>
<span id="debug"></span>
</form>
<script>
debug();
function debug(){
var e=document.getElementById("sel");
var rb1val = document.getElementById("r1").checked;
document.getElementById("debug").innerHTML="Option "+e.options[e.selectedIndex].value+" is selected. Radio Button 1 is "+rb1val;
document.getElementById("r1").value;
}
</script>