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"; 
})

希望能给你提供一些参考~