H5 存储数据sessionStorage

最新推荐文章于 2023-09-04 10:35:20 发布

沉、睡

最新推荐文章于 2023-09-04 10:35:20 发布

阅读量168

点赞数

文章标签： js java javascript 缓存 python

本文链接：https://blog.csdn.net/zz975896590/article/details/119991076

版权

H5 存储数据sessionStorage

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<pre>
sessionStorage的使用：存储数据到本地。存储的容量5mb左右。
    1.这个数据本质是存储在当前页面的内存中-意味着其它页面和浏览器无法获取数据
    2.它的生命周期为关闭当前页面，关闭页面，数据会自动清除

    setItem(key,value):存储数据，以键值对的方式存储
    getItem(key):获取数据，通过指定名称的key获取对应的value值
    removeItem(key):删除数据，通过指定名称key删除对应的值
    clear():清空所有存储的内容
</pre><br>
<input type="text" id="userName"><br>
<input type="button" value="设置数据" id="setData">
<input type="button" value="获取数据" id="getData">
<input type="button" value="删除数据" id="removeData">
<input type="button" value="清空数据" id="emptyData">
<script>
    /*存储数据*/
    document.querySelector("#setData").onclick=function(){
        /*获取用户名*/
        var name=document.querySelector("#userName").value;
        /*存储数据*/
        window.sessionStorage.setItem("userName",name);
    }
    /*获取数据*/
    document.querySelector("#getData").onclick=function(){
        /*如果找不到对应名称的key,那么就会获取null*/
        var name=window.sessionStorage.getItem("userName");
        alert(name);
    }
    /*删除数据*/
    document.querySelector("#removeData").onclick=function(){
        /*在删除的时候如果key值错误，不会报错，但是也不会删除数据*/
        window.sessionStorage.removeItem("userName");
    }
    /* 清空数据 */
    document.querySelector("#emptyData").onclick=function () {
        window.sessionStorage.clear ();
    }
</script>
</body>
</html>

沉、睡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
H5 存储数据sessionStorage

H5 存储数据sessionStorage<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><pre>sessionSto...
复制链接

扫一扫