离开页面时如何将下拉列表的选定值存储到cookie？

Question

我正在尝试在用户离开页面时将下拉列表的选定值存储到cookie。

我的问题是，当我重新加载页面并单击“检查cookie”时，无论我离开时选择了哪个选项，结果始终是第一个选项的值（“无选择”）。

如果我改为单击“手动设置cookie”，然后单击“检查cookie”，结果与预期的一样，则单击“手动设置cookie”时所选选项的值。

我的猜测是问题出在事件处理程序中，但我无法弄清楚。

<select id='client-type' name='client-type'>
    <option value='no selection'>-- Make your choice --</option>
    <option value='buyer'>Buyer</option>
    <option value='owner'>Owner</option>
    <option value='seller'>Seller</option>
</select>

<div onclick='setCookie()'>Manually set cookie</div>
<div onclick='checkCookie()'>Check cookie</div>

<script>
    window.on('beforeunload', setCookie());
    function setCookie() {
        var selectedValue = document.getElementById('client-type').value;
        document.cookie = 'client-type' + '=' + selectedValue;
    }

    function checkCookie() {
        alert(document.cookie);
    }
</script>

当用户离开页面时，如何将下拉列表的选定值（而非默认值）存储到cookie？