localStorage实现刷新页面后select保存选中值

前言
近期项目中遇到一个问题，具体表现为：select选中值后单击保存后刷新页面，select还
是第一个option选项。咦，我选择的值呢？刷新页面后，页面恢复到了初始状态，虽然数
据已经提交了服务器，但是页面也要做相应的更新才对啊。

主要思路

• 监听select下拉选中事件把选中的select标签的index存入到中localStorage中
• 当页面再次加载时，读取存入localStorage中的标签index，设置该index为selected

    var gradeval = localStorage.getItem("discountGradeVal");
    if(gradeval) {
        $(".discountSelect option").eq(gradeval).prop('selected', true);
    }

    $(".discountSelect").change(function(){
        var discountGradeVal = $(".discountSelect").find("option:selected").index();
        localStorage.setItem("discountGradeVal",discountGradeVal);
    });

说明

• localStorage可以换成cookie、sessionStorage
• jQuery中prop()用于操作DOM元素(指的是JS对象，Element类型)上的属性(property)
• 在jQuery1.6及以后版本中,请使用prop()函数来设置或获取checked、selected、disabled等属性,之前请用attr()

作者：yong_zai
链接：https://www.jianshu.com/p/97e2441095cc
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。