如何在按"确定"按钮后停止刷新选择框选项

Question

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

现在我选择了选择框作为芒果并输入了确定，一旦我单击确定，它就会设置值，但是当我刷新浏览器时，它将返回到上一个视图。 如何保持用户选择的相同选项，直到用户更改它

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()函数中设置本地存储项：

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");
}
}

请注意，我将其设置为选择列表中的选定值。 然后我们需要在页面加载时检索这个保存的值(以防有人刷新页面(：

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 中编码状态(基本上与 Web 应用程序保留某些状态的方式相同(。

在函数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，而是手动解析查询并不难。