本地存储和网页记住账号小案例

最新推荐文章于 2022-11-09 10:41:35 发布

红桃讲前端

最新推荐文章于 2022-11-09 10:41:35 发布

阅读量112

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/m0_62165756/article/details/124769967

版权

<!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>

红桃讲前端

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
本地存储和网页记住账号小案例

<!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>本地.
复制链接

扫一扫