fengxianqi - remember-scroll
type: channel
link: https://www.fengxianqi.com/index.php/tag/remember-scroll/
items: 用Class写一个记住用户离开位置的js插件

用Class写一个记住用户离开位置的js插件
type: item
date: 2019-03-04T16:03:00+00:00
description: 前言常见的js插件都很少使用ES6的class，一般都是通过构造函数，而且常常是手写CMD、AMD规范来封装一个库，比如这样：// 引用自：https://www.jianshu.com/p/e65c246beac1 ;(function(undefined) { "use strict" var _global; var plugin = { // ... } _global = (function(){ return this || (0, eval)('this'); }()); if (typeof module !== "undefined" && module.exports) { module.exports = plugin; } else if (typeof define === "function" && define.amd) { define(function(){return plugin;}); } else { !('plugin' in _global) && (_global.plugin = plugin); } }());但现在都9102年了，是时候祭出我们的ES6大法了，可以用更优雅的的写法来实现一个库，比如这样：class RememberScroll { constructor(options) { ... } } export default RememberScroll在这篇文章，博主主要通过分享最近自己写的一个记住页面滚动位置小插件，讲一下如何用class语法配合webpack 4.x和babel 7.x封装一个可用的库。项目地址：Github， 在线Demo：Demo喜欢的朋友希望能点个Star收藏一下，非常感谢。需求来源相信很多同学都会遇到这样一个需求：用户浏览一个页面并离开后，再次打开时需要重新定位到上一次离开的位置。这个需求很常见，我们平时在手机上阅读微信公众号的文章页面就有这个功能。想要做到这个需求，也比较好实现，但博主有点懒，心想有没有现成的库可以直接用呢？于是去GitHub上搜了一波，发现并没有很好的且符合我需求的，于是得自己实现一下。为了灵活使用（只是部分页面需要这个功能），博主在项目中单独封装了这个库，本来是在公司项目中用的，后来想想何不开源出来呢？于是有了这个分享，这也是对自己工作的一个总结。预期效果博主喜欢在做一件事情前先yy一下预期的效果。博主希望这个库用起来尽量简单，最好是插入一句代码就可以了，比如这样： remember-scroll examples 在想要加上记住用户浏览位置的页面上引入一下库，然后new RememberScroll()初始化一下即可。下面就带着这个目标，一步一步去实现啦。设计方案1. 需要存哪些信息？用户浏览页面的位置，主要需要存两个字段：哪个页面和离开时的位置，通过这两个字段，我们才可以在用户第二次打开网站的页面时，命中该页面，并自动跳转到上一次离开的位置。2.存在哪？记住浏览位置，需要将用户离开前的浏览位置记录在客户端的浏览器中。这些信息可以主要存放在：cookie、sessionStorage、localStorage中。存放在cookie，大小4K，空间虽有限但也勉强可以。但cookie是每次请求服务器时都会携带上的，无形中增加了带宽和服务器压力，所以总体来说是不太合适的。存放在sessionStorage中，由于仅在当前会话下有效，用户离开页面sessionStorage就会被清除，所以不能满足我们的需求。存放在localStorage,浏览器可永久保存，大小一般限制5M，满足我们需求。综上，最后我们应该选择localStorage。3. 需注意的问题一个站点可能有很多页面，如何标识是哪个页面呢？一般来说可以用页面的url作为页面的唯一标识，比如：www.xx.com/article/${id},不同的id对应不同的页面。但博主考虑到现在很多站点都是用spa了，而且常见在url后面会带有#xxx的哈希值，如www.xx.com/article/${id}#tag1和www.xx.com/article/${id}#tag2这种情况，这可能表示的是同一个页面的不同锚点，所以用url作为页面的唯一标识不太可靠。因此，博主决定将这个页面唯一标识作为一个参数来让使用者来决定，姑且命名为pageKey，让使用者保证是全站唯一的即可。如果用户访问我们的站点中很多很多的页面，由于localStorage是永久保存的，如何避免localStorage不断累积占用过大？我们的需求可能仅仅是想近期记住即可，即只需要记住用户的浏览位置几天，可能会更希望我们存的数据能够自动过期。但localStorage自身是没有自动过期机制的，一般只能…