用户在一个列表页浏览时，点击一个列表进入详情页，返回要求记录用户刚刚浏览的位置，而不是重新刷新页面到了页面顶部。（ps：如果用户好不容易翻到了第几十、几百乃至几千条时，难道要用户再重头开始？可能这个时候跳出率就高了，这个分析的确挺有道理，无力反驳...）
客户端存储数据的两个对象为：
- localStorage - 没有时间限制的数据存储
- sessionStorage - 针对一个 session 的数据存储（关闭窗口，存储的数据清空）
实现思路:
①页面滚动，将滚动位置存到session中
②再次进到页面中，到session中取出上次保存的浏览位置
③滚动到对应位置
setItem存储value
用途：将value存储到key字段
用法：.setItem( key, value)
代码示例：
sessionStorage.setItem("key", "value");
localStorage.setItem("site", "js8.in");
getItem获取value
用途：获取指定key本地存储的值
用法：.getItem(key)
代码示例：
var value = sessionStorage.getItem("key");
var site = localStorage.getItem("site");
具体实例：
html：
<div>
<input type="button" onclick="setItems()" value="存值">
<input type="button" onclick="getItems()" value="取值">
<input type="button" onclick="deleteItem()" value="删除">
</div>
<div>
<input type="button" onclick="setItems1()" value="存值">
<input type="button" onclick="getItems1()" value="取值">
<input type="button" onclick="deleteItem1()" value="删除">
</div>
js:
<script>
// localStorage 存值永久有效
function setItems(){
var user = {};
user.name = 'liu jp';
user.age = 18;
user.home = 'China';
localStorage.setItem('userinfo',JSON.stringify(user));
}
// localStorage 取值
function getItems(){
var data = JSON.parse(localStorage.getItem('userinfo'));
console.log('name:'+data.name+'\r age:'+data.age+'\r home:'+data.home);
}
// localStorage 删除指定键对应的值
function deleteItem(){
localStorage.removeItem('userinfo');
console.log(localStorage.getItem('userinfo'));
}
// sessionStorage 存值当前有效
function setItems1(){
var user = {};
user.name = 'zz';
user.age = 18;
user.home = 'China';
sessionStorage.setItem('userinfo',JSON.stringify(user));
}
// sessionStorage 取值
function getItems1(){
var data = JSON.parse(sessionStorage.getItem('userinfo'));
console.log('name:'+data.name+'\r age:'+data.age+'\r home:'+data.home);
}
// sessionStorage 删除指定键对应的值
function deleteItem1(){
sessionStorage.removeItem('userinfo');
console.log(sessionStorage.getItem('userinfo'));
}
</script>
最终取值
想在本地实现效果，可以 点击下载实例代码
此篇文章学习来源，查看原文
