javascript - 在 javascript 中使用 cookie 存储和恢复滚动位置

Question

我之前看到了一个答案，但我得到的答案似乎对我不起作用。我是 javascript 的初学者，所以如果有人能解释我做错了什么，我将不胜感激。

我的代码在这里:

<script type="text/javascript">
        $(document).ready(function()
        {
            if ( $.cookie("scroll") != null )
            {
                $(window).scrollTop( $.cookie("scroll") );
            }

            $(window).on("scroll", function()
            {
                $.cookie("scroll", $(window).scrollTop() );
            });

        });
    </script>

我想要实现的是如标题中所述，使用 cookie 存储用户的滚动位置，并在刷新页面时保持该位置。如果有另一种方法，我不需要使用 cookie。提前谢谢你。

Answer 1

如果您确实包含了 jquery cookie，那么一切都应该按预期工作:

//soln 1
$(window).on("scroll", function() {
  $.cookie("tempScrollTop", $(window).scrollTop());
});
$(function() {
  if ($.cookie("tempScrollTop")) {
    $(window).scrollTop($.cookie("tempScrollTop"));
    alert("loaded postion : " + $.cookie("tempScrollTop"));
  }
});

工作地点:http://output.jsbin.com/nizejuw

---

这是使用 HTML5 本地存储规范的替代解决方案。

//loading soln

$(function() {
  if (localStorage.tempScrollTop) {
    $(window).scrollTop(localStorage.tempScrollTop);
    alert("loaded postion : " + localStorage.tempScrollTop);
  }
});


//saving soln 1
$(window).on("scroll", function() {
  localStorage.setItem("tempScrollTop", $(window).scrollTop());
});

//saving soln 2
window.onbeforeunload = function() {
  var tempScrollTop = $(window).scrollTop();
  localStorage.setItem("tempScrollTop", tempScrollTop);
  return "Saved scroll to localstorage!!";
};