无需 Cookies：用 Class 实现记住用户离开位置的 JavaScript 插件

前言

在日常的开发工作中，我们经常会遇到这样的需求：用户在浏览某个页面时，由于某种原因暂时离开该页面，当他们再次打开该页面时，希望能够自动滚动到之前离开的位置，继续浏览。这种功能可以大大提升用户体验，让他们在访问网站时感到更加流畅和便捷。

实现思路

要实现这个功能，我们需要用到浏览器的本地存储 API。本地存储允许我们在浏览器中存储数据，即使用户关闭浏览器或重新打开页面，这些数据也不会丢失。

首先，我们需要在页面加载时获取当前的滚动位置，然后将其存储到本地存储中。当用户再次打开页面时，我们可以从本地存储中获取之前存储的滚动位置，然后滚动到该位置。

代码实现

下面是我用 Class 语法编写的 JavaScript 插件的代码：

class ScrollPosition {
  constructor() {
    this.storageKey = 'scroll-position';
  }

  getScrollPosition() {
    return {
      x: window.scrollX,
      y: window.scrollY,
    };
  }

  setScrollPosition(position) {
    window.scrollTo(position.x, position.y);
  }

  saveScrollPosition() {
    const position = this.getScrollPosition();
    localStorage.setItem(this.storageKey, JSON.stringify(position));
  }

  restoreScrollPosition() {
    const position = JSON.parse(localStorage.getItem(this.storageKey));
    if (position) {
      this.setScrollPosition(position);
    }
  }
}

const scrollPosition = new ScrollPosition();

window.addEventListener('scroll', () => {
  scrollPosition.saveScrollPosition();
});

window.addEventListener('load', () => {
  scrollPosition.restoreScrollPosition();
});

使用方法

要使用这个插件，你只需要在你的项目中安装它，然后在你的代码中实例化它即可。

import ScrollPosition from 'scroll-position';

const scrollPosition = new ScrollPosition();

然后，你就可以使用 saveScrollPosition() 和 restoreScrollPosition() 方法来保存和恢复滚动位置了。

总结

在这个项目中，我使用了 Class 语法来编写 JavaScript 插件，并结合 Webpack 4.x 和 Babel 7.x 来封装了一个可用的前端库。这个插件可以帮助你轻松实现记住用户离开位置的功能，从而提升用户体验。

我希望这篇文章对你有帮助。如果你有任何问题或建议，欢迎在评论区留言。