1. 登录缓存
思想：当用户登录过后会将之前输入的用户名和密码存到缓存中，当再次打开该网页时，自动填充用户名和密码。当用户输入新的用户名和密码时，缓存的内容被替换，下次进入该页面时，显示的是最近一次输入的账号和密码。
注意：在存入缓存中时必须存入字符串，若存入的为对象类型的数据时，再次取出时为
[object Object]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.all{
position: absolute;
left:0;
right: 0;
top:0;
bottom: 0;
margin:auto;
width: 400px;
height: 300px;
border:1px solid black;
border-radius:15px;
display: flex;
justify-content: center;
align-items:center;
}
input[type=text]{
width: 180px;
margin: 15px 0 8px 0;
}
.inner{
width: 60%;
}
.label>input{
vertical-align:middle;
margin: 0;
}
.label>span{
vertical-align:middle;
}
.button{
text-align: center;
}
button{
margin: 0 10px;
width: 100px;
}
</style>
<body>
<div class="all">
<div class="inner">
账号：<input type="text" class="count"/><br/>
密码：<input type="text" class="psw"><br/>
<div class="button">
<label for="123" class="label"><input type="checkbox" id="123"><span>记住我</span></label>
<button class="login">登录</button>
</div>
</div>
</div>
</body>
<script>
var count = document.getElementsByClassName("count")[0];
var psw = document.getElementsByClassName("psw")[0];
var checkBox = document.getElementById("123");
var login = document.getElementsByClassName("login")[0];
login.onclick = function () {
console.log(checkBox)
if(checkBox.checked){
var data = {
"count":count.value,
"psw":psw.value
}
localStorage.setItem("user",JSON.stringify(data));
}
}
window.onload = function () {
if(localStorage.getItem("user")){
var data = JSON.parse(localStorage.getItem("user"));
count.value = data.count;
psw.value = data.psw;
}
}
</script>
</html>
留言板缓存
思想：由于key为唯一的，故需要将留言时间（毫秒数）作为key。将留言标题和内容都作为value（作为json串传入）存在缓存中。每次页面加载时，从后向前读取缓存中的内容。最新的留言永远在最上方。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.content{
width: 500px;
height: 800px;
border:1px solid black;
}
</style>
<body>
<div>标题：</div>
<input type="text" class="title">
<div>内容：</div>
<input type="text" class="ct">
<button class="message">留言</button>
<div class="content">
</div>
</body>
<script>
var content = document.getElementsByClassName("content")[0];
var message = document.getElementsByClassName("message")[0];
var title = document.getElementsByClassName("title")[0];
var ct = document.getElementsByClassName("ct")[0];
message.onclick = function () {
var date = new Date();
var key = date.getTime();
var data = {
"time":date.toLocaleString(),
"title":title.value,
"content":ct.value,
};
localStorage.setItem(key,JSON.stringify(data));
getContent();
title.value="";
ct.value=""
};
function getContent(){
content.innerHTML="";
for(var i=localStorage.length-1;i>0;i--){
var key = localStorage.key(i);
var value = JSON.parse(localStorage.getItem(key));
console.log(value);
var item = document.createElement("div");
item.innerHTML = "标题："+value.title+"--内容："+value.content+"--时间："+value.time;
content.appendChild(item)
}
};
window.onload = function () {
getContent();
}
</script>
</html>
