localStorage
2019-05-06 本文已影响0人
Vincy_ivy
Title
利用HTML5的localStorage本地存储功能，设计一个如下图1、图2所示的页面。
- 用户首次登录，填写用户名和密码，可以选择是否保存密码。
- 用户下次登录不需要填写用户名和密码。
- 可以把保存在本地的用户名和密码清除。
First
Second
代码
localStorage.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="storage.js"></script>
</head>
<body>
<table>
<tr>
<td> 用户名</td>
<td><input type="text" id="uname" placeholder="输入用户名"></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" id="pwd"placeholder="输入密码"></td>
</tr>
<tr>
<td><input type="checkbox" id="save" >记住密码</td>
</tr>
<tr>
<td><input type="button" value="登录" id="btn"></td>
<td><input type="button" value="清除密码" id="clr"></td>
<td><input type="button" value="清空信息" id="clrall"></td>
</tr>
</table>
</body>
</html>
Storage.js
window.onload=function(){
var username=document.getElementById("uname");//定位到对象,不用value
var password=document.getElementById("pwd");
if(localStorage.getItem("username"))//获取元素
{
username.value=localStorage.getItem("username");
if(localStorage.getItem("password")){
password.value=localStorage.getItem("password");
}
}
//在会话期间保存
if(sessionStorage.getItem("msg"))
alert(sessionStorage.getItem("msg"));
var mybtn=document.getElementById("btn");
mybtn.onclick=function(){
var chk=document.getElementById("save");
localStorage.setItem("username",username.value);//保存,把值保存到前者里去
sessionStorage.setItem("msg","hello world!");
if(chk.checked){
localStorage.setItem("password",password.value);//需要加密
}
}
var myclr=document.getElementById("clr");
myclr.onclick=function(){
localStorage.removeItem("password");
alert("OK");
location.reload();
}
var myclrall=document.getElementById("clrall");
myclrall.onclick=function(){
localStorage.clear();
alert("信息清除成功");
location.reload();//刷新
}
}
