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的文本一直没有变化

需要select文本变化，需要添加语句 select_budgetary.options[i].text = "";

这么多无用代码，直接val赋值给select就行了，测试了没有问题，会更换为上次选择的

<select id="select_budgetary" name="budgetary" style="width: 100%">
    <option value="0">预算内</option>
    <option value="1">预算外</option>
</select>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.7.1/jquery.min.js"></script>
<script>
    window.onbeforeunload = function () {
        if (window.localStorage) storage.setItem("budgetary", $('#select_budgetary').val());
    }
    $(document).ready(function () {
        var v
        if (v = storage.getItem("budgetary")) $('#select_budgetary', v);
    });

</script>