sessionStorage 生命周期遇到的问题

sessionStorage 生命周期 不是在整个网站运行期间吗?还是单个页面而已?

问题:
当我在当前页面打开,并且按下 存储按钮, sessionStorage 只存在当前页面而已, 当我在另外一个窗口打开这个页面时,发现这个页面的sessionStorage为空,百思不得其解。

源代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
</head>

<body>
    <button class="btn">存储</button>
    <script>
    function $(ele) {
        return document.querySelector(ele);
    }
    $('.btn').addEventListener('click', function() {
        sessionStorage.setItem('username', 'yy');
    });

    console.log(sessionStorage.getItem('username'));
    </script>
</body>

</html>
阅读 26.2k
5 个回答

sessionStorage 属性允许你访问一个 session Storage 对象。它与 localStorage 相似,不同之处在于 localStorage 里面存储的数据没有过期时间设置,而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持,并且重新加载或恢复页面仍会保持原来的页面会话。在新标签或窗口打开一个页面会初始化一个新的会话,这点和 session cookie 的运行方式不同。
具体见这里

sessionStorage的清除时机是在会话结束,会话结束是在用户关闭标签页或者关闭窗口的时候;手动新开一个标签或窗口时,会新开会话,即使链接一样,也不会共享sessionStorage

只有在下面情况1的时候,新开页面才能'共享'sessionStorage

场景1:如果用户在A页面下存储了test,通过js或者a标签跳转到同源的B页面时,A页面下的sessionStorage会被拷贝到B页面下,AB页面的sessionStorage虽然相同,但二者相互独立;

场景2:如果用户在A页面打开的情况下,手动打开了一个新标签页,访问A页面,此时会重开一个新回话,二者sessionStorage是不共享的。

https://www.w3.org/TR/webstor...

sessionStorage只存在于当前页面,刷新后就会丢失

如果你在另外一个页面想要调取到数据的话,可以使用localStorage来存储,sessionStorage只能存储在当前页面,页面一旦关闭,就会清空。
他们之间的区别你可以看看w3school:
HTML 5 Web 存储

在打开一个页面的时候相当于打开了一个会话session,可以在同一个会话中读取、存储数据,当新打开一个页面是即为新开启了一个会话机制,两个是不想关的,如果需要在多个会话中读取同一个数据的话,还是需要用到localStorage来存储,但是这个会一直存在,只有你主动删除菜鸟清除掉!

推荐问题
宣传栏