javascript - 页面刷新后怎么让select保持选中上一个选定值，可以用隐藏域保存吗

Question

有人说用隐藏域保存value，给select触发onchange事件后改变隐藏域的值，可是我用这个方法写在页面刷新之后隐藏域并不能保存上面的值（是我写错了 还是这个方法是不可行的？）

html的代码

<select class="form-control" id="search-select" onchange="change()">
                  <option value="course" selected>课程</option>
                  <option value="major">专业</option>
                  <input type="hidden" name="selectVal" value="course" id="selectVal">
            </select>

js的代码

var selectVal=document.getElementById("selectVal");
    var select=document.getElementById("search-select");
    selectVal.value=select.value;
    alert(selectVal.value);
    function change(){
          var val=select.options[select.selectedIndex].value;
          selectVal.value=val;
        //用隐藏域存数据 
    }
    for(var i=0;i<select.options.length;i+=1){
        if(select.options[i].value==selectVal.value){
            select.options[i].selected=true;
            break;
        }
    }

接触js不多+ +有点懵逼
除了从后台返回数据和用Ajax 请问各位大神还有其他方法吗？

Answer 1

把选择的值放入location.hash中，无论是页面刷新，还是页面分享都可以很好的解决

Answer 2

localStorage或者cookie

Answer 3

页面加载不是onload吗？onchange也有这功能？是我时间长不接触，新出来的功能难道

Answer 4

建议是使用localstorage，保存住选中的状态，进入新页面，先取这个存好的值（但是他换电脑，换浏览器你就gg了）

Answer 5

<select name="sel" id="se">
    <option value="select your choose">select your choose</option>
    <option value="one">one</option>
    <option value="two">two</option>
    <option value="three">three</option>
</select>
<input type="hidden">
<script type="text/javascript">
var se = document.getElementById('se');
se.onchange = function(){
    localStorage.value = this.value;
    localStorage.index = this.selectedIndex;
    // console.log( localStorage.index +";"+ localStorage.value );
}
window.onload = function(){
    // alert( localStorage.index +";"+ localStorage.value );
    se.options[ localStorage.index ].selected = true;
}

Answer 6

localstorage 保存一个selectid的值，再写一个js让option的value值等于selectid的时候selected不就可以。

Answer 7

我说说我解决这个问题的过程吧= =
我现在上网找这个问题的解决方法，先后用了隐藏域、localStorage、cookie、sessionStorage（不过最后都不是用这些方法）
隐藏域在页面刷新之后就会清除的= =（为什么网上那么多人推荐..）
“cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。”
这个是网上找的cookie和另外两个的区别
而localStorage在浏览器关闭之后仍会一直保存的，sessionStorage仅在同一个会话（同属一个项目里面的页面）中的页面才能访问并且当会话结束后数据也随之销毁。（其实先不论下面发现的问题，其实我觉得sessionStorage比localStorage更适合这个情况）
可是，后来我问了一些大大，他们说这样只能保存数据，可是若以后想要把某一页面链接分享给别人，别人并不能看到你想要给他看到的页面，所以要用js正则获得url参数并值加到url的参数上面。上面回答也有一位大大说用location.hash，应该也是可行的吧> < 我还要再去试试，毕竟这些方法我都没有接触过也不会+ +

最后谢谢各位大大啦~

Answer 8

页面刷新页面里面的值都会为初始状态。 你可以通过localstorage