H5 js中的localStorage与sessionStorage

首先明确的一点是：

localStorage与sessionStorage都是存储方式；是H5版本提供的两种存储方式，在此之前使用cookie来存储数据，他们都是本地存储数据，不是存储在服务器端的

localStorage与sessionStorage的使用与语法上都几乎一模一样，唯一不同的是：

• localStorage 在本地存储的时间是没有限制的，只要你愿意，他可以永远的存储在你本地；
• sessionStorage只有当用户关闭浏览器窗口之后，数据才会被删除

接下来介绍几种常用的接口；

---

—-setItem()与getItem()的使用

sessionStorage.setItem('key','value');localStorage.setItem('key','value');

在语法上两者都是键值对的形式，key就是你要存储数据的名称（也就是键），value就是存储数据对应的值；
比如我们要存储当前用户点击某个区域的次数：

<div class="click-box"></div><script>    window.onload = function(){        var clickBox = document.querySelector('.click-box');        var aTimes;        //获取本地存储的数据；        var oTimes = sessionStorage.getItem('aTimes');        if(aTimes !== null){            console.log(oTimes);        }else{            oTimes = 0;        }        //点击存储数据        moveBox .onclick = function(){            oTimes = parseInt(oTimes)+1;            sessionStorage.setItem('aTimes',oTimes);        }    }</script>

上面的示例中，点击的时候执行一次 sessionStorage.setItem(‘aTimes’,clickTimes)，只要是key值相同的数据，新的数据会覆盖之前存储的数据；

这是sessionStorage与localStorage机制；这一方面同时也体现了这两个方法的‘改’是怎么操作的，只要重新调用覆盖即可；

想要查看有没有成功，只需要点击几次点击的区域，然后刷新浏览器就可以看到结果了，即console.log(oTimes)结果；

想要尝试localStorage的朋友，只需要将上面列子中的sessionStorage改成localStorage就行；

可以看到上面除了setItem()之外还出现了一个getItem();

getItem()的作用是取sessionStorage中的数据的,如果你想获得sessionStorage中的数据的话，你完全可以使用它;

前提是你得知道数据的键名，只需要将键名放进getItem()里面就行了，即sessionStorage.getItem(‘key’);

新增，获取，修改都有了，自然会有删除了：

---

—-removeItem()与clear();

removeItem()的作用是删除某一指定键名的数据；

sessionStorage.removeItem('key');//例如删除上面的点击次数;sessionStorage.removeItem('aTimes');// undefined

clear()作用是直接清空sessionStorage;

sessionStorage.clear();

---

—-valueOf()与key()

valueof()的作用是读取sessionStorage上的所有数据;

var date = sessionStorage.valueOf();console.log(date) //

你可以去尝试使用一下；

key()的作用是读取指定索引值上面的键的值；

var date = sessionStorage.key(1);console.log(date) //

---

hasOwnProperty()

hasOwnProperty()的作用是判断sessionStorage中是否存在某一数据；

例如上面的例子可以改成：

if(sessionStorage.hasOwnProperty('oTimes')){    console.log(oTimes);}else{    oTimes = 0;}

sessionStorage与localStorage用途：

这里简单介绍两个地方：

一、记录滚动条位置：

想来做过微信开发的同行都会发现，微信返回页面的时候，之前的页面会刷新，这就比较尴尬了；

例如浏览新闻列表的时候，滚动到了很后面，点击进去看了，看完回来了，结果发现，当前滚动条的位置居然不是在刚刚翻的位置，又要重新往下翻到之前看到的地方，简直是崩溃式的感觉；

这个时候sessionStorage就体现出他的价值了；

//首先判断sessionStorage中是否存在滚动条位置的记录;var sclTop;var oSclTop;if(sessionStorage.hasOwnProperty(sclTop)){    oSclTop = sessionStorage.getItem('sclTop');    //有sclTop,当页面加载的时候，滚动到sclTop值的位置    $(docuemnt).scrollTop(oSclTop);}else{    sclTop = 0;}//当用户翻阅的时候，记录滚动条位置;$(document).scroll = function(){    oSclTop = $(document).scrollTop();    sessionStorage.setItem('sclTop',oSclTop );}

二 保存由后台传过来的数据；

举个例子，比如当我们打开页面的时候，登录了，获取到了用户名，年龄等信息，我们可以将这些数据先用过sessionStorage存下来，之后如果还有用到这些信息的时候，直接调出来就行，这样就避免了大量的向后台请求的操作；

其实localStorage与sessionStorage用途有很多，这里就不在一一赘述了；

微信搜索关注公众号 【大前端js】，回复vue教程，react教程，webpack实战等等，获得不同的视频教程，大量视频教程等你来拿；阅读公众号最新一篇文章获取更多视频

关于localStorage与sessionStorage的用法与用途就写到这里了；

手打不易，转载时请注明转载出处，感谢