JS应用将用户名和密码保存至localStorage

最新推荐文章于 2024-06-27 20:21:48 发布
最新推荐文章于 2024-06-27 20:21:48 发布
阅读量6.5k 收藏 5
点赞数 2
分类专栏： Javascript案例总结
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38849871/article/details/76736386
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>将用户名和密码保存至localStorage</title>
</head>
<body>
    用户名：<input type="text" name="username"><br>
    密码：    <input type="text" name="pwd"><br>
            <input type="checkbox" name="pwd">是否记录账户密码<br>
</body>
<script type="text/javascript">
    var inp = document.getElementsByTagName('input');
    //页面加载完成 先判断 localStorage中有无name 和pass 
    if (localStorage.getItem('name')&&localStorage.getItem('pass')) {
    //存在將本地localStorage 值 显示在输入框中
        inp[0].value=localStorage.getItem('name');
        inp[1].value=localStorage.getItem('pass');
        inp[2].checked=true;//将选择保存账户密码的复选框更改为选中
    }
    //当用户登录时 点击保存账户和密码时 将账户名和密码 记录到localStorage中
    inp[2].click=function(){
        if (this.checked) {
            var n= inp[0].value;
            var p = inp[1].value;
            localStorage.setItem('name',n);
            localStorage.setItem('pass',p);
        }else{
        //若不点 则把已经记录到localStorge 中的值删除
            localStorage.removeItem('name');
            localStorage.removeItem('pass');
        }
    }
</script>
</html>

 

Mr_jinhua
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JavaScript - Vue / React / Uniapp 通用字符串加密解密功能函数，对写入 localStorage 缓存的数据进行加密和解密防止明文显示（写入浏览器缓存的时候将数据加密）
王佳斌
09-27 1694
js,vue,react,uniapp,nuxt前端网页网站，localStorage浏览器缓存数据加密与解密功能函数，localStorage加密和解密操作，js 实现加密localStorage存入的数据，localStorage存储用户信息加密解密，vue将数组对象加密存储在Storage浏览器缓存中，js加密本地存储的数据，react vue如何把localStorage的数据进行加密处理不让明文显示，将对象文本加密存入localStorage，uniapp加密localStorage里面的数据，l
ionic开发——利用localStorage存储用户名和密码
Mickeymouse
09-12 8326
在开发中,只要用户登录过一次，再次打开应用程序，都会自动填充用户名和密码,那么怎么实现的，我们可以用localStorage来实现这个功能，代码如下：   一、了解localStorage 1.  存储：localStorage.setItem(key,value); 如果key存在时，更新value 2.  获取：localStorage.getItem(key);
Javascript：本地存储之localStorage
最新发布
听海边涛声
06-27 1076
Javascript：本地存储之localStorage
localsStorage以对象格式存储用户名并记住用户名
weixin_44451266的博客
05-05 563
将用户名和密码构造成对象的格式, 存入localsStorage中, 类似这样的格式{usermae:‘admin’,pwd:‘123456’} // 获取元素 var username = document.querySelector(’#username’); var pwd = document.querySelector(’#pwd’); var remember = docume...
JS中模拟用户注册登录利用localStorage存储多个值
lanseguhui的博客
07-30 6691
&lt;!DOCTYPE html&gt; &lt;html lang="zh-CN"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;input t
利用html5的本地存储（localstorage）功能实现登录用户信息保存
fuckof的博客
09-08 9418
用户名、密码保存，自动登录等，可以通过设置cookie实现，第一次登录网站后在本地计算机的中写入cookie，之后再次登录此网站查看cookie中现有的值，用cookie值进行网站登录即可。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。 HTML5提供了一个此类问题比较方便的解决方案，就是localstorag
vue生成token保存在客户端localStorage中的方法
08-29
Vue 生成 Token 保存在...通过使用 Vuex 我们可以轻松地管理应用程序的状态，并将 Token 保存在客户端的 localStorage 中。在后端，我们可以通过接口生成 Token，并将其返回给前端，前端再将其保存在 localStorage 中。
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
10-15
在本文中，我们将深入探讨如何使用JavaScript（JS）与HTML5的本地存储机制Localstorage来实现用户注册和登录的功能，并进行基本的验证。Localstorage是Web应用存储数据的一种方法，它允许开发者在浏览器中持久化地...
vue使用localStorage保存登录信息 适用于移动端、PC端
10-16
1. 用户登录时，调用登录接口，传递用户名和密码。 2. 后端验证成功后，返回token。 3. 使用`localStorage.setItem`将token存储到`localStorage`中。 4. 将token设置到Vuex的状态中，以便在应用的其他地方使用。 5. ...
登录页面记住用户名密码
11-27
- **JavaScript/jQuery**：监听复选框的改变事件，当用户勾选"记住我"时，将用户名和加密后的密码存储在浏览器的本地存储（localStorage或sessionStorage）中。同时，页面加载时检查是否有存储的凭据，如果有，则...
Local Storage来记住登录名和密码
Endless love
07-26 746
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保存账号密码
Aenm的博客
05-17 1542
在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。 localStorage的优势与局限 localStorage的优势 1、localStorag...
js —— 模拟登录缓存 &留言板缓存（localStorage）
我的博客
09-18 815
1. 登录缓存 思想：当用户登录过后会将之前输入的用户名和密码存到缓存中，当再次打开该网页时，自动填充用户名和密码。当用户输入新的用户名和密码时，缓存的内容被替换，下次进入该页面时，显示的是最近一次输入的账号和密码。 注意：在存入缓存中时必须存入字符串，若存入的为对象类型的数据时，再次取出时为[object Object] <!DOCTYPE html> <html la...
localStorage：添加个人信息到本地存储中（分析+代码）
小福气的博客
07-27 1477
实现效果： 功能描述： 用户点击添加个人信息，信息提交到本地存储中，并渲染到页面； 姓名相同，则提示用户“该用户名已存在”，个人信息添加失败； 点击删除按钮，实现删除该用户信息的删除效果。 思路分析： 1 添加个人信息到本地存储功能 1判断本地存储中是否存在info1这个key 1如果没有，则info1=[]设为空数组 2如果有，则将i...
抓取chrome所有版本密码
hongduilanjun的博客
03-08 5425
文章首发先知社区：https://xz.aliyun.com/t/9752 工具已上传到github:https://github.com/SD-XD/Catch-Browser 谷歌浏览器存储密码的方式 在使用谷歌浏览器时,如果我们输入某个网站的账号密码,他会自动问我们是否要保存密码,以便下次登录的时候自动填写账号和密码 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 在设置中可以找到登录账户和密码 也可以直接看密码,不过需要凭证 这其实是windows的DPAPI机制 DPA
登录之后存储用户信息localStorage
m0_60322879的博客
05-30 1561
1
Chrome浏览器取证分析
MSB_WLAQ的博客
10-12 2172
Chrome浏览器取证分析 做个笔记，记录下最近学习的有关Web浏览器取证的知识，其中包括研究如何解密Chrome浏览器保存在本地的加密登录信息，以及当前进程上下文为SYSTEM或者管理员的情况下如何切换Windows权限，还有遇到多用户在线的情况下如何解密多个用户的密码。 Chrome浏览器登录信息存放在哪里？ Google Chrome的配置文件存放在%LocalAppData%目录下。例如，具有两个Google Chrome账号配置文件的windows用户admin将有一个目录，其中包含每个配置
js模拟从数据库拿到账号密码进行判断
m0_71349739的博客
12-07 1090
1.声明账号密码数组, 同时获取账号密码input的dom节点 2.点击登陆按钮用es6的some语法判断数据库(userName)数组中是否包含存在当前value值,声明key作为下标, 用声明obj接收遍历返回值, 判断为true则是存在, false, 则数据库不存在用户输入的账号, 判断userName[key] === user.value && pwd[key] === pass.value说明登陆成功, 否则密码错误 3. 效果 注意: 这种方法只是用es6语法some方法, 还有一个
js判断登陆用户名及密码是否为空的简单实例
zhupengqq的博客
04-12 1349
js判断登陆用户名及密码是否为空的简单实例 <script type="text/javascript">// 验证输入不为空的脚本代码 function checkForm(form) { if(form.username.value == "") { alert("用户名不能为空!"); form.username.focus(); return false; } if(for...
web前端开发 登录用户名和密码成功之后跳转网页 并且还包含自动登录的相关代码
06-09
好的，下面是一个示例，实现了输入用户名和密码、提交登录请求、登录成功后跳转页面并保存登录信息的功能： HTML部分： ```html <form> <label for="username">用户名：</label> <input type="text" id="username" name="username"><br><br> <label for="password">密码：</label> <input type="password" id="password" name="password"><br><br> <input type="submit" value="登录" onclick="return login();"> </form> ``` JavaScript部分： ```javascript function login() { var username = document.getElementById("username").value; var password = document.getElementById("password").value; // 发送登录请求，以下是示例代码 if (username === "admin" && password === "123456") { // 登录成功，保存登录信息，以下是示例代码 localStorage.setItem("username", username); localStorage.setItem("password", password); // 跳转到首页 window.location.href = "index.html"; return true; } else { alert("用户名或密码错误！"); return false; } } ``` 以上代码实现了以下功能： - 用户输入用户名和密码后点击登录按钮，会发送登录请求； - 如果用户名和密码正确，则保存登录信息（使用 `localStorage` 实现），并跳转到首页； - 如果用户名或密码错误，则弹出提示框，不跳转。 注意：以上代码仅为示例代码，实际应用中需要根据具体情况进行修改和完善。另外，自动登录的实现方式可以使用 cookie 或者 sessionStorage 等其他方式。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值