sessionStorage 和local storage区别

最新推荐文章于 2025-05-13 19:33:03 发布

转载最新推荐文章于 2025-05-13 19:33:03 发布 · 324 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://www.jianshu.com/p/b9d2a2391785

历史备份专栏收录该内容

52 篇文章

订阅专栏

本文介绍了HTML5中WebStorage的功能及应用，包括localStorage和sessionStorage的区别与使用方法，并通过实例展示了如何存储和读取数据。

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

1、web Storage
web Storage 是HTML 5引入的一个重要的功能，在前端开发的过程中会经常用到，它可以在客户端本地存储数据，类似cookie，但其功能却比cookie强大的多。cookie的大小只有4Kb左右（浏览器不同，大小也不同），而web Storage的大小有5MB。其API提供的方法有以下几种：

    setItem (key, value) ——  保存数据，以键值对的方式储存信息。

    getItem (key) ——  获取数据，将键值传入，即可获取到对应的value值。

    removeItem (key) ——  删除单个数据，根据键值移除对应的信息。

    clear () ——  删除所有的数据

    key (index) —— 获取某个索引的key

2、localStorage

localStorage的生命周期是永久性的。假若使用localStorage存储数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据，使用的方法如上所示。localStorage有length属性，可以查看其有多少条记录的数据。使用方法如下

      var storage = null;
         if(window.localStorage){              //判断浏览器是否支持localStorage
            storage = window.localStorage;     
            storage.setItem("name", "Rick");    //调用setItem方法，存储数据
            alert(storage.getItem("name"));     //调用getItem方法，弹框显示 name 为 Rick
            storage.removeItem("name");     //调用removeItem方法，移除数据
            alert(storage.getItem("name"));   //调用getItem方法，弹框显示 name 为 null
 
         }

localStorage 相对sessionStorage简单一点，需要注意的地方不是很多。

3、sessionStorage

sessionStorage 的生命周期是在浏览器关闭前。也就是说，在整个浏览器未关闭前，其数据一直都是存在的。sessionStorage也有length属性，其基本的判断和使用方法和localStorage的使用是一致的。需要注意的有以下几点：
<1> 页面刷新不会消除数据
为了验证，我准备了两个html文件，一个是index.html，另一个是text.html。至于text.html后面在详细说其起的左右。二者的html代码如下：
index.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
        <script>
            function submit() {
                var str = document.getElementById("text").value.trim();
                setInfo(str);
                document.getElementById("text").value = "";
            }
            //储存数据
            function setInfo(name) {
                var storage = window.sessionStorage;
                storage.setItem('name', name);
            }
            //显示数据
            function shows() {
               var storage = window.sessionStorage;
               var str = "your name is " + storage.getItem("name");
               document.getElementById("text").value = str;
            }
         </script>
    </head>
    <body>
         <input type="button" value="Login" onclick="submit()" />
         <input type="text" name="text" id="text" />
         <input type="button" value="show" onclick="shows()" />
         <a href="text.html" target="_blank">点击打开</a>
    </body>

text.html页面如下：

     <!DOCTYPE html>
     <html lang="en">
     <head>
         <meta charset="UTF-8">
         <title>Title</title>
     </head>
     <body>
         <script>
             var storage = window.sessionStorage;
             alert(storage.getItem("name"));
         </script>
     </body>
     </html>

打开index.html页面的结果如下：
这里写图片描述