javascript - 用户选择使用cookie，首页刷新不记得

Question

我有一些代码在第二次页面刷新后可以完美运行。基本上我有一个下拉选择，该选择将排序顺序附加到 URL 的末尾，选择此排序顺序后，页面将刷新。

这就是我的问题所在，在这篇文章中，cookie 似乎没有保留用户的选择，但是后续页面刷新，甚至通过目录分页，cookie 保留了用户的选择，这是完美的，这只是第一个选择后页面加载。

这是我的代码

<!-- List header -->
<select id="Selection" class="sorter" onchange="document.cookie= 'myDDIdx = ' + this.selectedIndex + '; path=/;';location=this.options[[this.selectedIndex]].value" style="float:right;margin-right:8px;">
 <option value="">Sort by</option>
 <option value="?orderby=0">Code</option>
 <option value="?orderby=1">Title A-Z</option>
 <option value="?orderby=2">Title Z-A</option>
 <option value="?orderby=3">Brand</option>
 <option value="?orderby=4">Lowest price</option>
 <option value="?orderby=5">Highest price</option>
 <option value="?orderby=6">Lowest Quantity</option>
 <option value="?orderby=7">Highest Quantity</option>
 </select>
 <div style="clear:both;"></div>


 <script>
     var sidx = document.cookie.indexOf("myDDIdx");
      if(sidx != -1)
          window.onload = function () { document.getElementById("Selection").selectedIndex =                     document.cookie.substr(sidx + 8,1); }
 </script>

有人可以建议我如何解决此问题吗？代码片段值得赞赏。

Answer 1

我相信您获取 cookie 的方式无法正常工作。我稍微更改了代码以使其正常工作。另请注意，更改页面时使用 window.location 而不仅仅是位置。

window.onload = function () {
    var cookies = document.cookie,
        sidx = !!cookies ? cookies.match(/myDDIdx=([0-9]+?);?/) : false;

    if (!!sidx && sidx.length >= 2) {
        document.getElementById("Selection").selectedIndex = sidx[1];
    }
};

document.getElementById("Selection").onchange = function () {
    document.cookie = 'myDDIdx=' + this.selectedIndex + '; path=/;';
    window.location = this.options[[this.selectedIndex]].value;
};

DEMO