js使用localStorage记录网页滚动条阅读位置的方法

为了提高网站浏览用户体验度，想实现用户关闭网页之后，下次打开仍然是上次阅读的位置，如何实现呢？今天就来教大家实现关闭网页仍然保持上次滚动条位置的方法。

首先分析下网页实现存储的几种方式：

1. cookie

2. sessionStorage

3. localStorage

cookie可以长时间保存，但是大小有默认4kb限制，而且浏览器最多允许存在50个左右。sessionStorage关闭浏览器就会失效。localStorage浏览器一般默认大小为5M，而且可以长久保存整个网站的数据，保存的数据没有过期时间，除非手动去删除。所以这里我们使用localStorage来存储上次阅读位置，具体看下面的实现代码。

<title>记住阅读位置演示</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

<!--引入jquery库-->
<script src="/jquery/jquery-1.9.1.min.js" type="text/javascript"></script>

<div class="content">
<p align="center">浔阳江头夜送客，枫叶荻花秋瑟瑟。</p>
<p align="center">主人下马客在船，举酒欲饮无管弦。</p>
<p align="center">醉不成欢惨将别，别时茫茫江浸月。</p>
<p align="center">忽闻水上琵琶声，主人忘归客不发。</p>
<p align="center">寻声暗问弹者谁，琵琶声停欲语迟。</p>
<p align="center">移船相近邀相见，添酒回灯重开宴。</p>
<p align="center">千呼万唤始出来，犹抱琵琶半遮面。</p>
<p align="center">转轴拨弦三两声，未成曲调先有情。</p>
<p align="center">弦弦掩抑声声思，似诉平生不得志。</p>
<p align="center">低眉信手续续弹，说尽心中无限事。</p>
<p align="center">轻拢慢捻抹复挑，初为霓裳后六幺。</p>
<p align="center">大弦嘈嘈如急雨，小弦切切如私语。</p>
<p align="center">嘈嘈切切错杂弹，大珠小珠落玉盘。</p>
<p align="center">间关莺语花底滑，幽咽泉流水下滩。</p>
<p align="center">水泉冷涩弦凝绝，凝绝不通声渐歇。</p>
<p align="center">别有幽愁暗恨生，此时无声胜有声。</p>
<p align="center">银瓶乍破水浆迸，铁骑突出刀枪鸣。</p>
<p align="center">曲终收拨当心画，四弦一声如裂帛。</p>
<p align="center">东船西舫悄无言，唯见江心秋月白。</p>
<p align="center">沉吟放拨插弦中，整顿衣裳起敛容。</p>
<p align="center">自言本是京城女，家在虾蟆陵下住。</p>
<p align="center">十三学得琵琶成，名属教坊第一部。</p>
<p align="center">曲罢常教善才服，妆成每被秋娘妒。</p>
<p align="center">五陵年少争缠头，一曲红消不知数。</p>
<p align="center">钿头银篦击节碎，血色罗裙翻酒污。</p>
<p align="center">今年欢笑复明年，秋月春风等闲度。</p>
<p align="center">弟走从军阿姨死，暮去朝来颜色故。</p>
<p align="center">门前冷落车马稀，老大嫁作商人妇。</p>
<p align="center">商人重利轻别离，前月浮梁买茶去。</p>
<p align="center">去来江口守空船，绕舱明月江水寒。</p>
<p align="center">夜深忽梦少年事，梦啼妆泪红阑干。</p>
<p align="center">我闻琵琶已叹息，又闻此语重唧唧。</p>
<p align="center">同是天涯沦落人，相逢何必曾相识。</p>
<p align="center">我从去年辞帝京，谪居卧病浔阳城。</p>
<p align="center">浔阳地僻无音乐，终岁不闻丝竹声。</p>
<p align="center">住近湓江地低湿，黄芦苦竹绕宅生。</p>
<p align="center">其间旦暮闻何物，杜鹃啼血猿哀鸣。</p>
<p align="center">春江花朝秋月夜，往往取酒还独倾。</p>
<p align="center">岂无山歌与村笛，呕哑嘲哳难为听。</p>
<p align="center">今夜闻君琵琶语，如听仙乐耳暂明。</p>
<p align="center">莫辞更坐弹一曲，为君翻作琵琶行。</p>
<p align="center">感我此言良久立，却坐促弦弦转急。</p>
<p align="center">凄凄不似向前声，满座重闻皆掩泣。</p>
<p align="center">座中泣下谁最多，江州司马清衫湿。</p>
</div>

<!--插入js记录和读取滚动条位置-->
<script>
//滚动时保存页面滚动条所在位置
$(window).scroll(function(){
 if($(document).scrollTop()!=0){
   localStorage.setItem("offsetTop", $(window).scrollTop());
 }
});
//当页面onload时，取出并滚动到上次保存的滚动条所在位置
  window.onload = function(){
 var offset = localStorage.getItem("offsetTop");
 $(document).scrollTop(offset);
};
</script>

通过上面的代码就可以实现记住上次阅读位置的效果了，有需要用到的地方你也试试看吧。