HTML5 sessionStorage会话存储
HTML5的sessionStorage提供了一个存储会话数据的机制,在用户浏览不同的页面时,数据会被保存下来。当用户关闭浏览器窗口时,这些数据才会被清除。
以下是一些使用sessionStorage的方法:
- 存储数据
sessionStorage.setItem('key', 'value');
- 获取数据
var data = sessionStorage.getItem('key');
- 删除数据
sessionStorage.removeItem('key');
- 清除所有数据
sessionStorage.clear();
- 获取数据的数量
var length = sessionStorage.length;
- 获取指定索引的key
var key = sessionStorage.key(index);
例如,我们可以使用sessionStorage来存储用户在一个页面上的浏览位置,当用户刷新页面或者离开页面时,可以恢复到用户上次的浏览位置。
window.onbeforeunload = function() {
sessionStorage.setItem('scrollPosition', window.pageYOffset);
};
window.onload = function() {
if(sessionStorage.getItem('scrollPosition') !== null) {
window.scrollTo(0, sessionStorage.getItem('scrollPosition', 0));
}
};
以上代码在用户离开页面时保存了当前的滚动位置,在用户回到页面时,浏览器会自动滚动到用户上次浏览的位置。
评论已关闭