LocalStorage和sessionStorage之间的区别

心已赠人 2023-01-07 05:57 142阅读 0赞

众所周知，自从HTML 5 标准出现之后，本地化存储一度成为热搜的关键词。在HTML 5 最开始时，本地存储有两种方式：一种是web Storage，另一种是web SQL。由于web SQL的实现是基于SQLite，它更倾向于DataBase方向，且W3C官方在2011年11月宣布不在维护web SQL规范，故其API接口目前已经不属于HTML 5的范畴。因此，目前我们常讲的HTML 5本地存储，多指的是web Storage。

下面，关于WebStorage及其两种形式作具体的描述和讲解。

**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属性，可以查看其有多少条记录的数据。使用方法如下：

1.      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" οnclick="submit()" />
    
    <input type="text" name="text" id="text" />
    
    <input type="button" value="show" οnclick="shows()" />
    
    <a href="text.html" target="_blank">点击打开</a>
    
    </body>
    
    </html>

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页面的结果如下：

![Center][]

当点击show按钮后，输入框内显示 “ your name is null“，此时sessionStorage中没有存储键值为 ”name“的数据。当在文本中输入”Rick“后，点击login按钮，输入框清空的时候数据已经存储到sessionStorage中，然后再去点击show按钮，会显示”your name is Rick“。此时，点击浏览器刷新网页，再点击show按钮，输入框中显示的依旧为”your name is Rick“

<2>只有在当前页面打开的链接，才可以访sessionStorage的数据；

还记准备好的那个text.html页面吗，这个时候轮到它发挥自己的作用了。为了验证，我们接着上面的步骤，打开text.html结果如下：

![Center 1][]

可以看到，这个值为null，无法得到”name“的值。现在，关闭这个text.html页面，通过index.html页面中的点击打开链接，可以看到如下的结果：

![Center 2][]

因此，可以得知，在当前页面打开的链接，是可以访问到sessionStorage内的数据。后来又经过其他一些测试，发现当从index.html打开text.html页面后，关闭index.html，刷新text.html还可以访问到sessionStorage中的数据。**只有当全部关闭index.html和从其内部打开的所有页面 或者直接关闭浏览器，才可以消除sessionStorage中的数据。**

**       **<3>使用window.open打开页面和改变localtion.href方式都可以获取到sessionStorage内部的数据

上述两种方式，经过测试，事实确实如此。感兴趣的同学，可以真实的测试下结果。关于localStorage和sessionStorage的不同之处，就不再做总结了。

总之，使用的时候，注意以上提到的几点，在使用的时候可以避免很多没必要踩的坑。关于本文有什么不到的地方，欢迎留言批评和指正，谢谢。

[Center]: /images/20221119/af1e022a213f4b60bc2696a7b702a4b6.png
[Center 1]: /images/20221119/db8a928f28b04f00a040fb33e17abe8f.png
[Center 2]: https://img-blog.csdn.net/20170221173814794?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZmNkZDEyMw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center