<!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>本地存储</title>
</head>
<body>
<input type="text" placeholder="获取本地数据" class="ww">
<input type="text" placeholder="获取本地数据" class="WW">
<input type="checkbox" class="W">
<button class="set">存储数据</button>
<button class="get">获取本地数据</button>
<button class="remove">删除本地数据</button>
<button class="del">删除本地数据</button>
</body>
</html>
<script>
let ipt=document.querySelector('.ww');
let int=document.querySelector('.WW');
let set=document.querySelector('.set');
let get=document.querySelector('.get');
let remove=document.querySelector('.remove');
let dle=document.querySelector('.del');
let remember=document.querySelector('.W')
//addEventListener事件绑定可用removeEventListener解绑也可以用它实现事件监听
set.addEventListener('click',function(){
let val=ipt.value;
let ww=int.value;
localStorage.setItem('username',val)
localStorage.setItem('mima',ww)
})
get.addEventListener('click',function(){
localStorage.getItem('username','mima')
console.log( localStorage.getItem('username','mima'));
console.log( localStorage.getItem('mima'));
})
//删除本地数据
remove.addEventListener('click',function(){
localStorage.clear('username','mima');
})
//清楚本地数据
dle.addEventListener('click',function(){
localStorage.clear();
})
//通过if进行判断获取数据是否有值进行网页记住密码
if(localStorage.getItem('username','mima')){
ipt.value=localStorage.getItem("username");
int.value=localStorage.getItem("mima");
remember.checked =true
}
remember.addEventListener('change',function(){
if(this.checked){
localStorage.setItem("username",ipt.value)
localStorage.setItem("mima",int.value)
}else{
localStorage.removeItem('username','mima')
}
})
</script>
本地存储和网页记住账号小案例
最新推荐文章于 2023-07-26 17:15:56 发布