3分钟学会sessionStorage用法

港控/mmm° 2022-07-13 20:16 162阅读 0赞

**前言：**

因最近移动端开发过程中遇到一个运营提出的所谓技术难点需求，对于原生APP来说轻而易举，毕竟自己的APP用户操作指哪打哪，但是H5该怎么做?H5就实现不了么？对于一个爱研究攻克这些前端棘手问题的我来说，我没尝试过，我是拒绝对提出需求者说实现不了，做不到之类的。

是什么需求呢？--需求方要求用户在一个列表页浏览时，点击一个列表进入详情页，返回要求记录用户刚刚浏览的位置，而不是重新刷新页面到了页面顶部。（ps：如果用户好不容易翻到了第几十、几百乃至几千条时，难道要用户再重头开始？可能这个时候跳出率就高了，这个分析的确挺有道理，无力反驳...）。

那么开始脑洞大开了，当时脑子里出来各种解决方案：

1、将浏览时的滚动位置存到cookie里，进到这个页面再取。那多久销毁呢？好像不灵活...pass

2、将详情页通过ifram或者弹框方式引到当前页，通过操作关闭当前弹窗（那么在已经完成的页面上再重构，加操作按钮？那么加载效率和体验呢？...反正不看好）

3、将浏览时的滚动位置传到服务器端，加载页面时，根据用户来取最后浏览的位置，各种参数传来调去（跟方案一很类似）

4、通过H5本地存储的方式将数据存起来，需要时取值（没啥经验，先研究一下吧，好像挺靠谱）

**　**接下来先了解一下什么是本地存储吧!

*  　　**简介：**

**HTML5 web 存储,一个比cookie更好的本地存储方式。**

首先我们先了解一下：

## 　　什么是 HTML5 Web 存储? ##

使用HTML5可以在本地存储用户的浏览数据。

早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能.

数据以 键/值 对存在, web网页的数据只允许该网页访问使用。

## 　　localStorage 和 sessionStorage  ##

客户端存储数据的两个对象为：

*  localStorage - 没有时间限制的数据存储
 *  sessionStorage - 针对一个 session 的数据存储（**关闭窗口，存储的数据清空**）

了解完sessionStorage之后是不是很符合我们的需求呢？将数据存到 session中，管你前进后退还是刷新，数据依然在，关闭窗口后再进页面才会清空数据，那么完全符合需求啊，看到这玩意简直激动快要泪奔了！！！

再理一下实现思路，①页面滚动，将滚动位置存到session中 →  ②再次进到页面中，到session中取出上次保存的浏览位置 → ③滚动到对应位置

这家伙简直好玩到嗷嗷叫啊，睁大眼睛看重点咯！

这里只介绍setItem和getItem，当然还有什么removeItem删除key、clear清除所有的key/value操作。

#### 　　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"); //滚动时保存滚动位置

$(window).scroll(function(){

if($(document).scrollTop()!=0){

sessionStorage.setItem("offsetTop", $(window).scrollTop());//保存滚动位置

} 
    });

**//onload时，取出并滚动到上次保存位置**

window.onload = function() {

var _offset = sessionStorage.getItem("offsetTop");

$(document).scrollTop(offsetTop);

};

可以去跑跑效果，肯定意想不到！

发表评论取消回复

表情：

评论列表（有 0 条评论，162人围观）

还没有评论，来说两句吧...

相关阅读

相关 Jmeter接口测试实战篇：10分钟学会Jmeter的用法

![bd6a58ed7c104fd8b3ed0a4cf75cdccb.jpeg][] 一提到接口测试，通常大家会有这样的疑问：前端测试不是已经覆盖到各种业务逻辑了吗？为什么还

Myth丶恋晨/ 2024年03月06日 01:42/ 0 赞/ 109 阅读

相关 3分钟学会设计模式 -- 单例模式

►单例模式 ![图片][88aa595e40f7450c896365e158d57a49.png] ►使用场景在编写软件时，对于某些类来说，只有一个实例很重要。

心已赠人/ 2023年09月28日 09:25/ 0 赞/ 5 阅读

相关 3分钟，学会一个 Lambda 小知识（一）

前言 Lambda 表达式是一个匿名函数，有些类似于JavaScript 中的闭包，把一个函数当作参数一样传递，使用它设计的代码会更加简洁、更加灵活。许多主流语言，如

水深无声/ 2023年09月26日 16:16/ 0 赞/ 113 阅读

相关 sessionStorage和localStorage的用法

sessionStorage的存储，只存在于当前窗口可使用。例如：![窗口][20210602093204895.png] 这里有两个窗口，在哪个页面窗口使用了sess

梦里梦外;/ 2022年10月17日 05:55/ 0 赞/ 191 阅读

相关 3分钟学会sessionStorage用法

　　前言：　　因最近移动端开发过程中遇到一个运营提出的所谓技术难点需求，对于原生APP来说轻而易举，毕竟自己的APP用户操作指哪打哪，但是H5该怎么做?H5就实现

港控/mmm°/ 2022年07月13日 20:16/ 0 赞/ 163 阅读

相关 localStorage和sessionStorage用法

H5新增特性本地存储localStorage和sessionStorage，下面说一下具体的区别 localStorage：是能\长时间存储本地浏览器的数据，当一个标签页改

红太狼/ 2022年05月29日 11:39/ 0 赞/ 276 阅读

相关 LocalStorage和SessionStorage用法

web 本地存储（localStorage、sessionStorage）说明 > 对浏览器来说，使用 Web Storage 存储键值对比存储 Cookie

川长思鸟来/ 2022年05月24日 09:06/ 0 赞/ 285 阅读

相关 localStorage、sessionStorage的区别和用法

webstorage > webstorage是本地存储，存储在客户端，包括localStorage和sessionStorage。 localStorage

叁歲伎倆/ 2022年04月11日 02:43/ 0 赞/ 291 阅读

相关 5分钟学会arduino

首先我们应该知道const int的含义 const int /char 是用来定义一些“常量”，比如 arduino主板上的端口编号。 int 就是用来定义一些变量与

逃离我推掉我的手/ 2022年03月26日 01:28/ 1 赞/ 784 阅读

相关 localStorage sessionStorage Cookie 区别和用法

原文: https://blog.csdn.net/shenxianhui1995/article/details/93010158 区别 localStorage:

迈不过友情╰/ 2021年12月17日 00:21/ 0 赞/ 319 阅读