利用sessionStorage来做页面之间的通信

最新推荐文章于 2023-05-06 20:33:06 发布

家里的喵

最新推荐文章于 2023-05-06 20:33:06 发布

阅读量1k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/huanlesyaya/article/details/103703079

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

上篇刚说了下localStorage怎么在两个不同的页面之间做通信以及他们通信成功的几个条件，今天就顺便讲下sessionStorage是怎么做的。sessionStosrage 这个语法跟localStorage是一样的,如下:

// 保存数据到 sessionStorage
sessionStorage.setItem('key', 'value');

// 从 sessionStorage 获取数据
let data = sessionStorage.getItem('key');

// 从 sessionStorage 删除保存的数据
sessionStorage.removeItem('key');

// 从 sessionStorage 删除所有保存的数据
sessionStorage.clear();

但是sessionStorage还是有几个跟localStorage不同的地方：

1.存储时间的时效性，localStorage生命周期是永久，这意味着除非用户手动清除localStorage信息，否则这些信息将永远存在，sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。

2.相同浏览器的不同页面或者标签页可以共享相同的localStorage（页面属于相同域名,协议和端口），但是相同浏览器的不同页面或标签页间却无法共享sessionStorage的信息（页面也是属于相同域名,协议和端口）

相信大家对一条应该都知道，如果不理解上面所说的第2条，没有关系，直接上个非常简单的demo,估计大家都会懂了

  <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>pageA</title>
    </head>
    <body>
    
    <script>
        //我在sessionStorage存入了一个token
        sessionStorage.setItem('token',new Date().getTime());
    </script>
    </body>
    </html>

先在pageA往sessionStorage存储一个token,然后在pageB取得这个值

  <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>pageB</title>
    </head>
    <body>
    <script>
        //取得这个存入的token
        alert(sessionStorage.getItem('token'));
    </script>
    </body>
    </html>

我们发现在pageB弹出的是一个null,根本取不到这个值，如果把取值操作放在pageA页面，那么是可以获取到这个token的值的，这正好说明了第2点：

相同浏览器的不同页面或标签页间无法共享sessionStorage的信息（即使页面也是属于相同域名,协议和端口）

如果是在pageA往localStorage存储这个token, 那么在pageB是可以取得这个token的值

总结：sessionStorage做不了跨页面之间的通信，但是在同个页面下做设值跟取值的操作是可以的，大家可以根据业务场景需要，选择合适的存储的方法就可以了，那就真的没有办法实现sessionStorage多页面的数据共享了吗，答案是否定的。下篇就讲讲怎么在浏览器的多个tab页中共享sessionStorage。

家里的喵

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
利用sessionStorage来做页面之间的通信

上篇刚说了下localStorage怎么在两个不同的页面之间做通信以及他们通信成功的几个条件，今天就顺便讲下sessionStorage是怎么做的。sessionStosrage 这个语法跟localStorage是一样的,如下:// 保存数据到 sessionStoragesessionStorage.setItem('key', 'value');// 从 sessionStorage...
复制链接

扫一扫