HTML5---21.SessionStorage的应用 

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>

浏览器渲染效果:

<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>
posted @ 2019-03-11 16:26  Tobenew  阅读(176)  评论(0)  编辑  收藏  举报