教你一分钟学会web存储！

最新推荐文章于 2024-07-16 11:55:46 发布

原创最新推荐文章于 2024-07-16 11:55:46 发布 · 285 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

HTML 专栏收录该内容

27 篇文章

订阅专栏

web存储分为sessionStorage(会话)存储和localStorage(本地)存储
sessionStorage就是在打开当前会话窗口时存储地数据，一旦关闭会话窗口，数据就没了，非常地不方便
而localStorage则解决了这个问题直接把数据存储在本地

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 存储数据到本地，大小位5MB左右
        setItem(key,value存储数据，以键值对存储)
        getItem(key)
        remoItem(key)
        clearItem()清楚所有的存储内容
     -->
    <input type="text" name="" id="userName">
    <input type="button" value="设置数据" id="setData">
    <input type="button" value="获取数据" id="getData">
    <input type="button" value="删除数据" id="removeData">
</body>
<script>
    document.querySelector("#setData").onclick=function(){
        var name=document.querySelector("#userName").value;
        //在F12  application看数据  会话数据存储在当前页面的内存中
        window.sessionStorage.setItem("userName",name);
        //本地存储    存储内容20MB
        window.localStorage.setItem("user",name);
    }
    document.querySelector("#getData").onclick=function(){
       
        //在F12  application看数据  会话数据存储在当前页面的内存中
        var name=   window.sessionStorage.getItem("userName",name);
        //本地存储
        console.log(name);
    }
</script>
</html>