用localStorage保存账号密码

最新推荐文章于 2022-09-19 10:22:03 发布
最新推荐文章于 2022-09-19 10:22:03 发布
阅读量1.5k 收藏 4
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44567078/article/details/90286021
版权

在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。

localStorage的优势与局限

localStorage的优势

1、localStorage拓展了cookie的4K限制

2、localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的

localStorage的局限

1、浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性

2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换

3、localStorage在浏览器的隐私模式下面是不可读取的

4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡

5、localStorage不能被爬虫抓取到

localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空。

页面源码

<!DOCTYPE html>

<html class="ui-page-login">

<head>

<meta charset="utf-8">

<meta name="viewport"/>

<meta name="viewport">

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-status-bar-style" content="black">

<title></title>

<link href="css/mui.min.css" rel="stylesheet" />

<link href="css/style.css" rel="stylesheet" />

</head>

<body>

<header class="mui-bar mui-bar-nav">

<h1 class="mui-title">登录</h1>

</header>

<div class="mui-content">

<div class="tupian">

<img src="img/WuLing.png" style="width: 250px; height:250px;"/>

   </div>

<form id='login-form' class="mui-input-group">

<div class="mui-input-row">

<label>账号</label>

<input id='PhoneNum' type="text" class="mui-input-clear" placeholder="请输入账号">

</div>

<div class="mui-input-row mui-password">

<label>密码</label>

<input id='PassWord' type="password"                   class="mui-input-password" placeholder="请输入密码">

</div>

</form>

<div class="mui-content-padded">

<button id='login' type="button" class="mui-btn mui-btn-block mui-btn-primary">登录</button>

</div>

</div>

<script src="js/mui.min.js"></script>

<script src="js/jquery-2.0.3.min.js"></script>

        <script type="text/javascript">

            $("#login").click(function(){

             //获取账号密码

              var cname = document.getElementById("PhoneNum").value.trim();

                var pwd = document.getElementById("PassWord").value.trim();

                //判断用户密码是否为空

                if(cname.trim().length == 0) {

                    mui.toast("用户名不能为空!")

                    return;

                } else if(pwd.trim().length == 0) {

                    mui.toast("密码不能为空!");

                    return;

                } else {

                 //ajax请求  传data值到后台进行判断

                  $.ajax({

                   data: {

                            "cname": cname,

                            "pwd": pwd

                        },

                url:'http://localhost:2562/APP/AppMain/AppDengLu',

                type: 'get',

                datatype:'json',

                timeout:10000,//网络超时时间

                success: function (data) {

                 if(data == "seccess")

                                {

                                 remPwd();

                                    mui.openWindow({

                                        url: 'index.html',

                                        id: 'index',

                                   });

                                }else if(data == "falsess"){

                                 alert("当前用户已过期")

                                }else{

                                 alert("账号或者密码错误")

                                }

                },                

            });

                }         

            })

//将账号与密码保存到Localstore

            function remPwd() {

                var cname = document.getElementById("PhoneNum").value.trim();

                var pwd = document.getElementById("PassWord").value.trim();

                localStorage.setItem("PhoneNum", cname);

                localStorage.setItem("PassWord", pwd);

            }

页面加载数据

            $(document).ready(function(){

              var Num = localStorage.getItem("PhoneNum");

//判断是否有这个命名的缓存数据

            if(Num != null) //如果缓存中有数据，则加载出来

            {

                document.getElementById("PhoneNum").value = Num;

document.getElementById("PassWord").value= ocalStorage.getItem("PassWord");

            }

            })

            

        </script>

</body>

</html>

 

Aenm
关注
html用户登录保存用户名,实例8-2 使用localStorage对象保存与读取登录用户名
weixin_39612228的博客
06-03 1489
1.功能描述新建一个登录页面，用户在文本框中输入用户名与密码，单击“登录”按钮后，将使用localStorage对象保存登录时的用户名。如果选中“是否保存密码”选项，将保存登录时的密码，否则，将清空原先保存的密码。当重新在浏览器中打开该页面时，经过保存的用户名和密码数据，将分别显示在相应的文本框中。2.实现代码在DreamweaverCS5中新建一个HTML页面8-2.html，加入代码如代码清单...
html5用户名和密码保存,登录时，记住用户名和密码的功能——HTML5 WEB存储（localStorage）...
weixin_34332352的博客
06-03 2254
前言想要实现登录一次，下次再进登录页面，直接出现上次登录的用户名和密码。运用的知识点一、localStorage、sessionStorage？localStorage - 没有时间限制的数据存储sessionStorage - 针对一个 session 的数据存储之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储(cookie中每条cookie的存储空间为4k，lo...
html5超简单的localStorage实现记住密码的功能实现
09-27
主要介绍了html5超简单的localStorage实现记住密码的功能实现，非常具有实用价值，需要的朋友可以参考下
localStorage保存账号密码
weixin_34055787的博客
09-18 398
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maxim...
保存密码 localStorage
爱学习的小强
09-19 125
localStorage存储账号密码
何度
07-27 1429
var username= localStorage.getItem("uname"); var pwd= localStorage.getItem("upwd"); localStorage.setItem('uname',_uname); localStorage.setItem('upwd',_upwd);  
vue使用localStorage实现记住密码
qq_35269556的博客
09-19 596
vue 使用localStorage实现登录记住用户名密码
h5新特性localstorage的简单应用（记住登录名和密码）
szl199107101035的博客
09-08 6514
我们在制作登录界面的时候回出现一个勾选框，询问我们是否记住账号和密码，当我们勾选了之后下次进来就是上次登录的账号密码，可以直接登录。那这个功能是如何实现的呢？下面我们就是用h5的新特性localstorage来实现。  首先，我们需要了解下localstorage的含义和用法。在客户端h5提供了两种存储方式；一种是localstorage，一种是sessionstorage         下
用localStorage实现登录时记住密码的功能
lelena_123的博客
07-07 791
HTNL代码片段 <el-input v-model="ruleForm.user" placeholder="请输入账号" @input='inputPassword' autocomplete="off"></el-input> <el-input type="password" v-model="ruleForm.password" @input='clearFunc' show-password placeholder="请输入密码" prefix-icon
登录时，记住用户名和密码的功能——HTML5 WEB存储（localStorage）
热门推荐
liayn523的博客
12-22 3万+
前言 想要实现登录一次，下次再进登录页面，直接出现上次登录的用户名和密码。 运用的知识点 一、localStorage、sessionStorage？     localStorage - 没有时间限制的数据存储     sessionStorage - 针对一个 session 的数据存储 之前，这些都是由 cookie 完成的。但是 co
localStorage本地存储——记住用户名和密码
qq_44176252的博客
05-13 1641
localStorage本地存储——记住用户名和密码 html进行布局：主要就是需要有一个文本框和一个密码框，以及需要一个记住密码的复选框 <section> <div> <label for="username">用户名：</label><input type="text" id='username' name='username'> </div> <di
localStorage存储用户姓名密码.存储方式：对象
weixin_44168784的博客
09-11 207
姓名： 密碼： 存储的 时候，发现无法直接存储对象，只能存字符串，所以先要进行格式转换， 先将要存储的对象转成字符串，getItem获取的数据是字符串，要想获得数据，必须再JSON.parse转成对象 ...
JS应用将用户名和密码保存至localStorage
李金华的博客
08-05 6620
将用户名和密码保存至localStorage 用户名： 密码： 是否记录账户密码 var inp = document.getElementsByTagName('input'); //页面加载完成 先判断 localStorage中有无name 和pass if (localStorage.ge
用户名，密码用localStorage存值
cxc709467878的博客
01-04 548
html <span>用户</span> <input type="text" name="" id="username"> <span>密码</span> <input type="text" name="" id="password"> <button id="Sign">登录</button> js var username= document.q
项目总结——使用localStorage实现记住密码
qq_53008257的博客
04-27 542
由于每次都输入用户名密码太累，想在自己的个人网站上添加一个记住密码功能，以前的项目是使用浏览器cookie实现的，而后发现cookie实现代码较为复杂，而且localStorage可以完美替代功能且代码简单，故使用localStorage实现。 具体代码如下 部分html代码，当remove <input type="text" v-model="login.username"> <input type="password" v-model="login.password"> &lt
Local Storage来记住登录名和密码
Endless love
07-26 793
Local Storage来记住登录名和密码 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;/head&gt; &lt;bod
登录之后存储用户信息localStorage
m0_60322879的博客
05-30 1619
1
WebStorage示例——记住密码
H小志
09-06 5123
通常用户在登录一个网站时，浏览器都会提示“是否记住密码？”，如果选择记住密码，下次再从同一个浏览器登录该网站时，便不再需要用户再次输入用户名和密码，而是这些信息已经显示在了输入框内，用户只需要点击“登录”按钮即可；甚至当用户进入网站时，直接让用户处于已登录的状态。这样便省去了用户登录网站时所花费的时间。html5之前这种功能可以用cookie做到，但是cookie的写法冗杂，又有缺陷。如今用htm
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值