# remember-scroll [![NPM version](https://img.shields.io/npm/v/remember-scroll.svg)](https://www.npmjs.com/package/remember-scroll) [![npm download](https://img.shields.io/npm/dt/remember-scroll.svg?style=flat-square)](https://www.npmjs.com/package/remember-scroll) [![jsdelivr](https://data.jsdelivr.com/v1/package/npm/remember-scroll/badge)](https://www.jsdelivr.com/package/npm/remember-scroll) [![license](https://img.shields.io/npm/l/remember-scroll.svg?style=flat-square)](https://github.com/fengxianqi/remember-scroll/blob/master/LICENSE) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/remember-scroll?label=gzip) [English](https://github.com/fengxianqi/remember-scroll) | 中文 一个使用`localStorage`来记住页面浏览位置的插件。若当前浏览器不支持`localStorage`，将自动降级插件不生效。gzip后仅3kb。 使用时，将为当前站点记住用户的浏览位置，用户离开或关闭页面后，再次打开该页面时，将自动滚动到上一次离时的浏览位置。 为了防止用户浏览过多页面导致该站点的`localStorage`过大，可以通过```maxLength```设置缓存的最大页面数量，默认值是5，即只记录最多5个页用户最新浏览的页面。 需要注意的是，最好能为每个不同的页面设置```pageKey```参数，表示该页面的唯一标识。 文章介绍： - [用Class写一个记住用户离开位置的js插件](https://www.fengxianqi.com/index.php/archives/132/) - [为什么说rollup比webpack更适合打包库 ](https://www.fengxianqi.com/index.php/archives/160/) ## 示例 [demo](https://fengxianqi.github.io/remember-scroll/examples/) ## 安装 ```bash npm i remember-scroll --save ``` CDN ```html ``` 你可以在 [jsdelivr.com](https://www.jsdelivr.com/package/npm/remember-scroll) 获取到最新的版本。 ## 使用 通过 ` ``` ES6 module语法 ```javascript import RememberScroll from 'remember-scroll' new RememberScroll() ``` 在Vue中使用 ```vue ``` 如果你的页面数据是异步获取的，可以在异步方法中再初始化`RememberScroll`，比如： ```vue ``` ## 选项 | Name | Type | Default | Description | | :--: | :--: | :--: | :--: | | pageKey | String | '_page1' | 当前页面的唯一标识 | | maxLength | Number | 5 | 记录的最大页面数，防止localstorage占用过大 | ## 原理 通过监听```window.onscroll```事件，防抖处理后将用户的```scrollTop ```位置记录在`localStorage`中，存放在`localstorage`中名为`_rememberScroll`变量中： ``` [{pageKey: '_page1',y: 100},{pageKey: '_page2', y: '20'}] ``` 在页面初始化时，将读取`localStorage`的`_rememberScroll`的值，检查当前页面的`pageKey`是否一致，若一致则将页面的滚动条位置自动滚动到相应的`y`值。 ## 浏览器支持 本库主要依赖于localStorage。 | Chrome | Edge | Firefox | IE | Opera | Safari | |:---:|:---:|:---:|:---:|:---:|:---:| | 42+ ✔ | 12+ ✔ | 41+ ✔ | 9+ ✔ | 29+ ✔ | 10+ ✔ |