localStorage实现登录注册功能
HTML5 提供了两种在客户端存储数据的新方法:
- localStorage:生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端(即浏览器)中保存,不参与和服务器的通信。
- sessionStorage :仅在当前会话下有效,关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端(即浏览器)中保存,不参与和服务器的通信。源生接口可以接受,亦可再次封装来对Object和Array有更好的支持。
登录效果:JS代码
//先获取所有用户的对象//变成数组 if(window.localStorage.userArr){ //判断是否存在 var array = JSON.parse(window.localStorage.userArr); }else{ array = [];//创建一个新数组 } $("#login").bind("click",function(){ var username = $uname.val(); var password = $upwd.val(); var flag = false; var index = 0; //遍历数组进行匹配 for(var i =0;i<array.length;i++){ //判断是否有相同账号 if(username==array[i].username){//有这个账号 flag = true; index = i; } } if(flag){//如果存在 if(password==array[index].password){ alert("登录成功"); var yonghu = $uname; localStorage.name = yonghu.val(); console.log(localStorage.name); window.location.href="../html/index.html"; }else{ alert("密码错误"); } }else{//账号不存在或输入错误 $erroinfo.show().find("b").html("用户不存在,请先注册"); } })
注册效果:JS代码
//先获取所有用户的对象//变成数组 if(window.localStorage.userArr){ //判断是否存在 var array = JSON.parse(window.localStorage.userArr); }else{ array = [];//创建一个新数组 } $ok.bind("click",function(){ var username = $uname.val(); var password = $upwd.val(); //遍历数组进行匹配 for(var i =0;i<array.length;i++){ //判断是否有相同账号 if(username==array[i].username){ alert("该账号已存在"); window.location.href="../html/login.html"; return; } } //创建对象 var obj = { username:username,password:password } array.push(obj); window.localStorage.userArr=JSON.stringify(array); alert("用户创建成功"); window.location.href="../html/login.html"; })
希望能给你提供一些参考~