<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>初识 localStorage</title>
</head>
<body>
<form id="login" action="https://www.imooc.com" method="post">
<input type="text" name="username" />
<input type="password" name="password" />
<input type="submit" id="btn" value="登录" />
</form>
<script>
// 1.localStorage 是什么
// localStorage 也是一种浏览器存储数据的方式（本地存储），它只是存储在本地，不会发送到服务器端
// 单个域名下的 localStorage 总大小有限制
// 2.在浏览器中操作 localStorage
// 3.localStorage 的基本用法
// console.log(localStorage);
// // setItem()
// localStorage.setItem('username', 'alex');
// localStorage.setItem('username', 'zs');
// localStorage.setItem('age', 18);
// localStorage.setItem('sex', 'male');
// // length
// // console.log(localStorage.length);
// // getItem()
// // console.log(localStorage.getItem('username'));
// // console.log(localStorage.getItem('age'));
// // // 获取不存在的返回 null
// // console.log(localStorage.getItem('name'));
// // removeItem()
// // localStorage.removeItem('username');
// // localStorage.removeItem('age');
// // // 删除不存在的 key，不报错
// // localStorage.removeItem('name');
// // clear()
// localStorage.clear();
// console.log(localStorage);
// 4.使用 localStorage 实现自动填充
const loginForm = document.getElementById('login');
const btn = document.getElementById('btn');
const username = localStorage.getItem('username');
if (username) {
loginForm.username.value = username;
}
btn.addEventListener(
'click',
e => {
e.preventDefault();
// 数据验证
// console.log(loginForm.username.value);
localStorage.setItem('username', loginForm.username.value);
loginForm.submit();
},
false
);
</script>
</body>
</html>