数据缓存的小案例（模拟登录注册和留言缓存）

最新推荐文章于 2023-06-19 22:35:25 发布

Sk8？？？

最新推荐文章于 2023-06-19 22:35:25 发布

阅读量172

点赞数

分类专栏：案例

本文链接：https://blog.csdn.net/mrslonly/article/details/100907626

版权

案例专栏收录该内容

9 篇文章 0 订阅

订阅专栏

模拟登录注册

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .block {
            width: 400px;
            height: 300px;
            border-radius: 10px;
            border: 1px solid #000;
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }
        ul{
            margin: 100px 0;
        }

        ul > li {
            list-style: none;
            margin: 15px 0;
            text-align: center;
        }
        ul > li:last-child input[type=submit]{
            margin: 0 20px;
            width: 80px;
            height: 25px;
            text-align: center;
            line-height: 25px;
        }

    </style>
</head>
<body>
<div class="block">
    <form action="" id="login">
        <ul>
            <li>账号：<input id="id" type="text"/></li>
            <li>密码：<input id="pwd" type="text"/></li>
            <li><input id="ckbox" type="checkbox"/>记住我 <input type="submit" value="登陆"/></li>
        </ul>
    </form>
</div>
<script>
    var login=document.getElementById("login");
    var id=document.getElementById("id");
    var pwd=document.getElementById("pwd");
    var ckbox=document.getElementById("ckbox");
    login.onsubmit=function(){
        var iddata=id.value;
        var pwddata=pwd.value;
        console.log(iddata, pwddata);
        if(ckbox.checked){
            //写入缓存
            var data={
                "id":iddata,
            "pwd":pwddata
            }
            localStorage.setItem("user",JSON.stringify(data));
        }
        return false;
    }
    window.onload=function(){
        //读取缓存
        var user=JSON.parse(localStorage.getItem("user"));
        id.value=user.id;
        pwd.value=user.pwd;
    }
</script>
</body>
</html>

留言缓存

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .nav{
            width: 800px;
            height: 100%;
            margin: auto;
        }

        input{
            width: 300px;
            height: 30px;
        }
        span:first-child{
            color: blue;
            display: inline-block;
            height: 40px;
            width: 100px;
            line-height: 40px;
        }
        span:last-of-type{
            color: red;
            display: inline-block;
            height: 40px;
            width: 100px;
            line-height: 40px;
        }
        textarea{
            width: 500px;
            height: 100px;
            resize: none;
        }
        .content {
            margin-top: 10px;
             width: 500px;
             height: 400px;
             border: 1px solid #000;
            overflow: hidden;
            overflow-y: scroll;
         }
        button{
            width: 150px;
            height: 40px;
            box-sizing: border-box;
            font-size: 20px;
            background-color: #000000;
            color: #e4e4e4;
            border: none;
        }
    </style>
</head>
<body>
<div class="nav">
<span>标题：</span><br/>
<input id="title" type="text"/>
<br/>
    <span>内容：</span><br/>
<textarea id="txt"></textarea>
<br/>
<button id="send">留言</button>
<div class="content">

</div>
</div>
<script>
    var send=document.getElementById("send");
    var title=document.getElementById("title");
    var txt=document.getElementById("txt");
    var content=document.getElementsByClassName("content")[0];
    send.onclick=function(){
        var time=new Date();
        var t=title.value;
        var tx=txt.value;
        var data={
            "time":time.toLocaleString(),
            "title":t,
            "content":tx
        };
        localStorage.setItem(time.getTime(),JSON.stringify(data));
        readContent();
    }
    readContent();
    function readContent(){
        content.innerHTML="";
        var len=localStorage.length;
        for(var i=len-1;i>=0;i--){
            var key=localStorage.key(i);
            var data=JSON.parse(localStorage.getItem(key));
            var div=document.createElement("div");
            div.innerHTML="标题："+data.title+"--内容："+data.content+"--时间："+data.time;
            content.appendChild(div);
        }
    }
</script>
</body>
</html>

Sk8？？？

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
数据缓存的小案例（模拟登录注册和留言缓存）

模拟登录注册<html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } ...
复制链接

扫一扫