HTML5本地储存追加利用html5的本地存储功能实现登录用户信息保存

最新推荐文章于 2022-12-11 15:06:09 发布

boss2967

最新推荐文章于 2022-12-11 15:06:09 发布

阅读量3.2k

点赞数 1

本文链接：https://blog.csdn.net/boss2967/article/details/77667772

版权

本文介绍了如何利用HTML5的LocalStorage特性来存储和读取登录用户的用户名和密码，以实现自动登录功能。相比Cookie，LocalStorage更适合存储大量数据，且不会随每次请求发送到服务器，提高了性能。通过JavaScript代码示例展示了如何在用户登录时保存信息，并在页面加载时自动填充已保存的凭据。

摘要由CSDN通过智能技术生成

在HTML5中，本地存储是一个window的属性，包括localStorage和sessionStorage，从名字应该可以很清楚的辨认二者的区别，前者是一直存在本地的，后者只是伴随着session，窗口一旦关闭就没了。二者用法完全相同，这里以localStorage为例。

用户名、密码保存，自动登录等，可以通过设置cookie实现，第一次登录网站后在本地计算机的中写入cookie，之后再次登录此网站查看cookie中现有的值，用cookie值进行网站登录即可。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。

HTML5提供了一个此类问题比较方便的解决方案，就是localstorage。数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。html5 使用 JavaScript 来存储和访问数据。

下面是一个登录保存用户名密码的实例：

[html]view plaincopy 
   
 <!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;  