sessionStorage和localStorage的区别

最新推荐文章于 2025-11-07 15:37:14 发布

原创最新推荐文章于 2025-11-07 15:37:14 发布 · 469 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端-本地存储

前端面试专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了Web存储机制中两种重要的API：sessionStorage与localStorage。sessionStorage用于窗口临时存储，当页面关闭时数据消失；而localStorage则提供永久存储，除非手动删除数据。两者均能在客户端完成数据存储，不涉及服务器交互，并且都具有5MB的存储限制。

sessionStorage

窗口临时存储，页面关闭，本地存储消失；
数据不能共享

localStorage

永久存储（可以手动删除数据）
数据能够共享（两个窗口同时打开一个页面，数据能够共享）、

相同点：

存储限制（5M）
客户端完成，不会请求服务器处理

代码:

    <input type="button" value="设置">
    <input type="button" value="获取">
    <input type="button" value="清除">
    <input type="text">

    <script>
        var ipt = document.getElementsByTagName('input');
        var content = ipt[3];
        if(localStorage.getItem('con')){
            content.value = localStorage.getItem('con');
        }
        ipt[0].onclick = function(){
            localStorage.setItem('con',content.value);
        }
        ipt[1].onclick = function(){
            alert(localStorage.getItem('con'));
        }
        ipt[2].onclick = function(){
            localStorage.clear();
        }
    </script>