H5 js中的localStorage与sessionStorage

最新推荐文章于 2025-05-14 17:34:59 发布

原创最新推荐文章于 2025-05-14 17:34:59 发布 · 877 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#存储 #javascript #session #storage #local

js 专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了HTML5中localStorage与sessionStorage的区别及应用。探讨了这两种存储方式如何通过setItem和getItem等方法实现数据的存储与读取，并展示了如何利用它们记录用户行为及存储后台数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先明确的一点是：

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 );
}