1.是什么
只是将数据存储在本地,不会发送到服务器端
2.单个域名下的localStorage总大小有限制,5MB左右
3.localStorage.getItem(‘key’),获取不存在的返回null
set(),remove(),clear()
4.表单的自动填充
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form id="form" action="http://www.baidu.com">
<input type="text" name="username" />
<input type="password" name="pwd" />
<input type="submit" class="btn" value="登录" />
</form>
<script>
const loginForm = document.getElementById('form');
const username = localStorage.getItem('username');
//进入页面时从localStorage获取username
if (username) {
loginForm.username.value = username;
}
document.querySelector('.btn').onclick = function (e) {
//阻止表单的默认提交
e.preventDefault();
localStorage.setItem('username', loginForm.username.value);
loginForm.submit();
}
</script>
</body>
</html>
5.localStorage的注意事项
- localStorage是持久化的本地存储,除非手动清除(比如通过js删除,或者清除浏览器缓存)否则数据是永远不会过期的
- sessionStorage当会话结束时(比如关闭浏览器)的时候,sessionStorage中的数据被清空
- 键和值都是字符串类型,不过不是,也会先转成字符串类型再存进去
- 不同的域名是不能共用localStorage的,比如慕课的不能获取百度的localStorage
- 如果没有设置失效时间,默认会话结束后,cookie会被清除
- 当Name,Domain,Path这3个字段都相同的时候,才是同一个cookie
- ** 前端不能通过JS设置一个HttpOnly类型的Cookie,这种类型的cookie只能是后端来设置
只要是HttpOnly类型的,通过document.cookie是获取不到的,也不能进行修改** - Domain,Path,Secure都要满足条件,还不能过期的Cookie才能随着请求发送到服务器端