利用html5的本地存储功能实现登录用户信息保存
2014-08-17 19:27
1081 查看
在HTML5中,本地存储是一个window的属性,包括localStorage和sessionStorage,从名字应该可以很清楚的辨认二者的区别,前者是一直存在本地的,后者只是伴随着session,窗口一旦关闭就没了。二者用法完全相同,这里以localStorage为例。
用户名、密码保存,自动登录等,可以通过设置cookie实现,第一次登录网站后在本地计算机的中写入cookie,之后再次登录此网站查看cookie中现有的值,用cookie值进行网站登录即可。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。
HTML5提供了一个此类问题比较方便的解决方案,就是localstorage。数据不是由每个服务器请求传递的,而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。对于不同的网站,数据存储于不同的区域,并且一个网站只能访问其自身的数据。HTML5 使用 JavaScript 来存储和访问数据。
下面是一个登录保存用户名密码的实例:
用户名、密码保存,自动登录等,可以通过设置cookie实现,第一次登录网站后在本地计算机的中写入cookie,之后再次登录此网站查看cookie中现有的值,用cookie值进行网站登录即可。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。
HTML5提供了一个此类问题比较方便的解决方案,就是localstorage。数据不是由每个服务器请求传递的,而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。对于不同的网站,数据存储于不同的区域,并且一个网站只能访问其自身的数据。HTML5 使用 JavaScript 来存储和访问数据。
下面是一个登录保存用户名密码的实例:
<!DOCTYPE html> <!--[if lt IE 7 ]> <html lang="en" class="no-js ie6 lt8"> <![endif]--> <!--[if IE 7 ]> <html lang="en" class="no-js ie7 lt8"> <![endif]--> <!--[if IE 8 ]> <html lang="en" class="no-js ie8 lt8"> <![endif]--> <!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]--> <head> <meta charset="UTF-8" /> <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> --> <title>图书销售管理系统</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Login and Registration Form with HTML5 and CSS3" /> <meta name="keywords" content="html5, css3, form, switch, animation, :target, pseudo-class" /> <meta name="author" content="Codrops" /> <link rel="shortcut icon" href="../favicon.ico"> <script type="text/javascript" src="js/jquery.min.js"></script> </head> <script> //先查看是否有本地数据(记住密码) /* function myfunction(){ var email = localStorage.getItem("email"); var password = localStorage.getItem("password"); if(email!=null&&password!=null){ alert("邮箱:"+email+"密码:"+password); $.ajax({ url : '../servlet/LoginServlet?choose=login', data : { email : email, password : password }, dataType : 'json', success : function(data) { if (data.msg == "") { alert("用户名或密码错误"); } else { //登录成功后保存session,如果选择了记住密码,再保存到本地 //window.location.href ='../index/index.jsp'; } }, error : function() { alert("系统错误"); } }); }else{ //alert("没有信息"); } } function saveStorage(){ var email = document.getElementById("email").value; localStorage.setItem("email",email); var password = document.getElementById("password").value; localStorage.setItem("password",password); } function login(){ $.ajax({ url : '../servlet/LoginServlet?choose=login', data : { email : $('#loginform input[name=email]').val(), password : $('#loginform input[name=password]').val() }, dataType : 'json', success : function(data) { if (data.msg == "") { alert("用户名或密码错误"); } else { //登录成功后保存session,如果选择了记住密码,再保存到本地 window.location.href ='../index/index.jsp'; } }, error : function() { alert("系统错误"); } }); } function reg(){ $.ajax({ url : 'servlet/LoginServlet?choose=reg', data : { username : $('#regform input[name=username]').val(), password : $('#regform input[name=password]').val(), email : $('#regform input[name=email]').val(), }, dataType : 'json', success : function(data) { if(data.msg == false){ alert("注册失败"); }else{ alert("注册成功请返回登录"); } }, error : function() { alert("系统错误"); } }); } */ $(document).ready(function(){ //读取 localStage 本地存储,填充用户名密码,如果自动登录有值直接跳转; //相反,跳转到本页面,等待登陆处理 var storage = window.localStorage; var getEmail = storage["email"]; var getPwd = storage["password"]; var getisstroepwd = storage["isstorePwd"]; var getisautologin = storage["isautologin"]; if("yes" == getisstroepwd) { if("yes" == getisautologin) { if(( ("" != getEmail) ||(null != getEmail)) && (("" != getPwd) ||(null != getPwd))) { //lacoste 已经保存 登陆信息 直接登陆 // alert('正在自动登录'); $("email").val(getEmail); $("#password").val(getPwd); // window.location=""; //加载时显示:正在自动登录 $.ajax({ url : '../servlet/LoginServlet?choose=login', data : { email : getEmail, password : getPwd }, dataType : 'json', success : function(data) { if (data.msg == "") { alert("账号信息异常,请核实后重新登录"); } else { //登录成功后保存session,如果选择了记住密码,再保存到本地 //window.location.href ='../index/index.jsp'; } }, error : function() { alert("系统错误"); } }); } } else { $("#email").val(getEmail); $("#password").val(getPwd); document.getElementById("isRemberPwdId").checked = true; } } }); function login(){ var userEmail=$("#email").val(); var userPassWord=$("#password").val(); var storage = window.localStorage; //记住密码 if(document.getElementById("isRemberPwdId").checked) { //存储到loaclStage storage["email"] = userEmail; storage["password"] = userPassWord; storage["isstorePwd"] = "yes"; } else { storage["email"] = userEmail; storage["isstorePwd"] = "no"; } //下次自动登录 if(document.getElementById("isAutoLoginId").checked) { //存储到loaclStage storage["email"] = userEmail; storage["password"] = userPassWord; storage["isstorePwd"] = "yes"; storage["isautologin"] = "yes"; } else { storage["email"] = userEmail; storage["isautologin"] = "no"; } $.ajax({ url : '../servlet/LoginServlet?choose=login', data : { email : userEmail, password : userPassWord }, dataType : 'json', success : function(data) { if (data.msg == "") { alert("用户名或密码错误"); } else { //登录成功后保存session,如果选择了记住密码,再保存到本地 window.location.href ='../index/index.jsp'; } }, error : function() { alert("系统错误"); } }); alert("登录成功"); } </script> <body> <div class="container"> <header> </header> <section> <div id="container_demo"> <a class="hiddenanchor" id="toregister"></a> <a class="hiddenanchor" id="tologin"></a> <div id="wrapper"> <div id="login" class="animate form"> <form id="loginform" name="loginform" autocomplete="on" method="post"> <h1>登录</h1> <p> <label for="username" class="uname" data-icon="u"> 邮箱 </label> <input id="email" name="email" required="required" type="text" placeholder="请输入邮箱" autofocus /> </p> <p> <label for="password" class="youpasswd" data-icon="p"> 密码</label> <input id="password" name="password" required="required" type="password" placeholder="请输入密码" /> </p> <p class="keeplogin"> <input type="checkbox" name="isRemberPwdId" id="isRemberPwdId" /> <label for="loginkeeping">记住密码 </label> </p> <p class="keeplogin"> <input type="checkbox" name="isAutoLoginId" id="isAutoLoginId" /> <label for="autologin">自动登录 </label> </p> <p class="login button"> <input type="button" value="登录" onclick="login()" /> </p> <p class="change_link"> 没有账号? <a href="#toregister" class="to_register">前去注册</a> </p> </form> </div> </div> </div> </section> </div> </body> </html>
相关文章推荐
- HTML5本地储存追加利用html5的本地存储功能实现登录用户信息保存
- 利用html5的本地存储功能实现登录用户信息保存
- (转)在ASP.NET 中实现单点登录(利用Cache, 将用户信息保存在服务器缓存中)
- 利用ajax实现登录:验证完用户信息后如何保存用户信息并实现跳转
- 利用JSP+JS+CSS+Servlet实现用户登录,保存用户名密码功能
- 实现jsp页面显示用户登录信息,利用session保存。
- 在ASP.NET 中实现单用户登录(利用Cache, 将用户信息保存在服务器缓存中)[转]
- 利用SharedPreferences实现登录用户信息保存
- 转:在ASP.NET 中实现单点登录(利用Cache, 将用户信息保存在服务器缓存中)
- 利用h5的本地存储实现登录页面里的记住账号和密码功能
- 在ASP.NET 中实现单点登录(利用Cache, 将用户信息保存在服务器缓存中)
- 利用SharedPreferences实现登录用户信息保存
- 利用Servlet和jsp实现客户端与服务器端的用户登录信息验证
- ios实现用户登录的保存密码功能
- 一款功能强大并且可以结合html5实现本地存储的数据库 – SQLite学习文档
- java Web项目中,利用其过滤功能,实现访问者每次访问服务器时,记录访问者的IP,访问时间,Url等信息,并保存到文件的操作
- Chrome中利用HTML5实现具有文件“编辑”及“下载”功能的本地应用
- C#实现支持单点登录的一个存储用户信息的类
- java cookie 实现用户账号信息本地保存
- php中使用cookie来保存用户登录信息的实现代码