HTML5---21.SessionStorage的应用

最新推荐文章于 2022-02-23 15:15:02 发布

转载最新推荐文章于 2022-02-23 15:15:02 发布 · 99 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Tobenew/p/10511444.html

本文详细介绍了sessionStorage的特性，包括其存储大小限制为5Mb，数据存储在当前页面的内存中，以及生命周期仅限于当前会话。同时，文章提供了setItem(), removeItem(), 和getItem()等常用方法的示例代码，演示如何在HTML页面中实现数据的添加、删除和获取。

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

sessionStorage的几个特点
    1.存储大小:5Mb
    2.存储数据在当前页面的内存中
    3.生命周期:关闭当前页面就销毁了
常用的方法
    setItem()添加
    removeItem() 删除   
    getItem() 获取
sessionStorage可以在浏览器调试 Application里面的 Storage里面查看

<body>
    <input type="text" name="username" id="name">
    <input type="button" value="添加" id="add">
    <input type="button" value="删除" id="remove">
    <input type="button" value="获取" id="get">
</body>
<script>
    document.querySelector("#add").onclick = function () {
        var name = document.querySelector("#name").value;
        sessionStorage.setItem("username",name);
    }
    document.querySelector("#remove").onclick = function () {
        sessionStorage.removeItem("username");
    }
    document.querySelector("#get").onclick = function () {
       var nam = sessionStorage.getItem("username");
        alert(nam);
    }
</script>

浏览器渲染效果:

转载于:https://www.cnblogs.com/Tobenew/p/10511444.html