模拟登录注册
<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>