[按下OK按钮后如何停止刷新选择框选项

Question

我已经在Servicenow中创建了一个UI页面，下面是我的简单HTML片段，它创建了一个选择框和一个确定按钮

现在，我将选择框选为Mango，然后输入ok，一旦单击ok，它将设置该值，但是当我刷新浏览器时，它将返回到先前的视图。如何保持用户选择的相同选项，直到用户对其进行更改

function validation(){
	var value=document.getElementById("selectedValue").value;
	
	if(value=='disabled selected')
		{
			alert("Please select any value before submitting");
		}
	else if(value=="1"){
				alert("hello this is mango");
	}
	
}

<div class="container">
			<div class="row">
				
				<div class="form-group" style="margin-top:12px;">
					
					<select class="form-control" name="selectedValue" id="selectedValue" style="width:150px;">
						<option value="disabled selected">Choose your option</option>
						<option value="1" >Mango</option>
						<option value="2">Orange</option> 
						<option value="3">Grapes</option> 
						
					</select>
				<!--<h4 id="number_of_updates" style="display:none"><span class="label label-danger"></span></h4> -->

				</div>
					<button type="button" class="btn btn-primary" onclick="validation()"  style="padding: 0px 8px;">Ok</button>
				
			</div>
		</div>

它正在按要求工作，当我刷新浏览器时，它将设置为选择您的选项。任何人都可以帮助我如何保存选定的值，直到更改为止

Answer 1

为了获得所需的结果，我将使用localStorage。我将在validation()函数中设置localStorage项目：

function validation(){
    var value=document.getElementById("selectedValue").value;
    localStorage.setItem('MyValue', value);
    if(value=='disabled selected')
        {
            alert("Please select any value before submitting");
        }
    else if(value=="1"){
                alert("hello this is mango");
    }

}

注意，我将其设置为selectList的选定值。然后，我们需要在页面加载时检索此保存的值（以防有人刷新页面）：

window.onload = function (){ //function that is called when your page 
var selectList = document.getElementById('selectedValue');
  var stored = localStorage.getItem('MyValue');
  console.log(stored);
  if(stored && selectList){
    selectList.value = stored //setting saved value to as selected in selectList
  }
}

编辑：即使大多数浏览器都支持localStorage，但建议检查其是否可访问。像if (typeof localStorage !== 'undefined') ...

Answer 2

有几种方法可以保持刷新状态。 localStorage是显而易见的选择，但针对您的情况可能更简单的解决方案可能是像这样在URL中编码状态（基本上与网络应用保留其某些状态的方式相同。）>

在validation()函数的末尾插入此代码：

 history.pushState(null, '', '?val=' + value);
在该函数后插入此代码：

window.onload = function() {
    var params = new URLSearchParams(location.search);
    var value = params.get('val') || 'disabled selected';
    var select = document.getElementById('selectedValue');
    if (select) select.value = value;
}
就是这样。 注意：URLSearchParams在IE上不起作用，因此手动解析查询并不困难。