localStorage实现页面刷新保存select选中状态时无法设置select选中状态

[一颗贪婪的星丶]

html代码

<select id="select_budgetary" name="budgetary" style="width: 100%">
     <option value="0">预算内</option>
     <option value="1">预算外</option>
</select>

离开页面时保存选中的value

window.onbeforeunload = function () {
    var storage = window.localStorage;
    if (window.localStorage) {
    	var select_budgetary = document.getElementById('select_budgetary');
        storage.setItem("budgetary", $('#select_budgetary').val());
        console.log($('#select_budgetary').val());
     }
     return;
}

加载页面时读取value设置select选中状态

$(document).ready(function () {
    var storage = window.localStorage;
    console.log(storage.getItem("budgetary"));
    var select_budgetary = document.getElementById("select_budgetary");
    for (var i = 0; i < select_budgetary.options.length; i += 1) {
         if (select_budgetary.options[i].value == storage.getItem("budgetary")) {
            select_budgetary.options[i].selected = true;
            break;
         }
    }
});

现在的问题是离开页面和加载页面时打印的value是正常的，在加载页面后select的选中状态依旧是默认状态，点开select后的高亮选项却是和localStorage读取的value对应的，但select的文本一直没有变化。

前端小白阶段，请问各位大大怎么解决这个问题。

[雁塔菜农]

这个应该不难吧只有存储到本地硬盘，那么刷新网页或下次打开网页，自然改变标志的。