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

最新推荐文章于 2023-01-12 21:10:57 发布

@阿猫阿狗~

最新推荐文章于 2023-01-12 21:10:57 发布

阅读量1k

点赞数

原文链接：https://www.jianshu.com/p/97e2441095cc

版权

前言
近期项目中遇到一个问题，具体表现为：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);
    });