关于sessionStorage

最新推荐文章于 2023-09-06 16:52:47 发布

原创最新推荐文章于 2023-09-06 16:52:47 发布 · 1.1w 阅读

0 ·

CC 4.0 BY-SA版权

本文为博主原创文章，未经博主允许不得转载。 Email: [email protected]

文章标签：

#缓存

HTML5 专栏收录该内容

12 篇文章

订阅专栏

本文通过示例代码解释了sessionStorage如何在不同页面间传递数据。当从一个页面导航到另一个页面时，sessionStorage可以在同一会话内保持数据一致。但如果直接访问目标页面，则无法获取到之前页面设置的session数据。

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

localStorage 是全局缓存，永久有效，这个毫无疑问。sessionStorage是在当前会话之间有效，当前会话是多长。即：a页面设置sessionStorage，只要是从a页面出发建立联系的之后的页面都可以拿到a页面缓存的数据。

举例说明：

a页面：

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <h2>a页面</h2>
    <button id="btn">点击一下</button>
    <script type="text/javascript">
        document.getElementById('btn').onclick = function(){
            sessionStorage.setItem('a','this is a');
            window.location.href = 'b.html'
        }
    </script>
</body>
</html>

b页面：

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <h2>b页面</h2>
    <div id="con"></div>

    <script type="text/javascript">
        var page = sessionStorage.getItem('a');
        document.getElementById('con').innerHTML = page;
    </script>
</body>
</html>