localStorage写注册登录页面

最新推荐文章于 2022-04-10 21:42:32 发布
最新推荐文章于 2022-04-10 21:42:32 发布
阅读量1.4k 收藏 3
点赞数
分类专栏： 面试题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42327537/article/details/106414781
版权
本文介绍了使用HTML5的localStorage来实现注册和登录的功能。讲解了localStorage的存储原理和限制，以及如何存储和调取用户信息。通过创建对象、数组操作和条件判断，实现用户信息的存储与验证，确保登录的正确性。
摘要由CSDN通过智能技术生成

As we now,

HTML5 提供了两种在客户端存储数据的新方法：

  • localStorage - 没有时间限制的数据存储

localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

存储方式：

以键值对(Key-Value)的方式存储，永久存储，永不失效，除非手动删除。

大小：

每个域名5M

  • sessionStorage - 针对一个 session 的数据存储

HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的，区别在于 sessionStorage 在关闭页面           后即被清空，而 localStorage 则会一直保存。

其实思路还是非常简单的，首先要熟悉掌握以下几个知识点

1. localStorage

了解本专栏 订阅专栏 解锁全文 超级会员免费看
在路上等
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
订阅专栏
localStorage 本地存储的相关知识点总结（页面登录注册功能的简单实现）
ZHANGJIN9546的博客
06-21 1352
1、什么是localStorage 用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。 2、localStorage 优势与局限 优势： a、localStorage拓展了cookie的4K限制 b、localStorage会...
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
10-15
主要介绍了JS+HTML5本地存储Localstorage实现注册登录及验证功能,结合实例形式分析了基于JS+HTML5本地存储Localstorage实现注册登录及验证相关操作技巧,需要的朋友可以参考下
基于localStorage的登录注册
weixin_30614587的博客
06-29 740
以下代码，如果有地方有错，请直接指出，我会改进的（只改错误，不改逻辑，因为我自己是不会这样写代码的，这个只适合初学者）： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>登录页面</title> ...
登录 注册 vuex \ sessionStorage、localStorage token cookie session 区别 a标签新窗口打开页面跳转sessionStorage丢失
weixin_50885665的博客
04-10 864
这个问题是今天被面试官问道，面试官当时说的话大概意思是，多个网页打开的是同一个网页时，他们使用了同一个sessionStorage，某个页面关闭了，问我其他页面的sessionStorage会不会被清除！例如: 点击新闻 ---- 新窗口打开一个页面 --- 在新窗口打开的页面里用vuex设置的state,原来的新闻页获取不到(用watch也监控不到) ---- 原因是新窗口打开的。2、通过token方式 选2 ---- 如果前端和服务器之间存在跨域问题,推荐用。
【Javascript】进阶之localStorage在登录注册中的应用
qq_37086980的博客
12-16 867
描述 1. 进入首页, 判断本地缓存的手机号和密码是否都存在, 如果都存在显示已经登录和显示个人中心; 如果其中有一项不存在则状态为未登录, 显示登录注册按钮。 2. 注册的时候, 在缓存中有一个数组 ，存储当前创建的账户信息 3. 登录的时候,获取数组,验证对象是否在数组中存在 localStorage基本语法 // localStorage: 缓存数据 json数据 console.log(localStorage); // 存储数据: 1. localSt
vue.js写多账号登录、注册、登录成功页面（注册）
热门推荐
菜鸟的博客
10-12 1万+
因为是刚接触前端，只会写单页面，所以分三个单页面实现，三个页面之间用window.location.href=“ ”实现跳转。先写注册页面，下一篇写登录，最后写登录成功。 我是直接引用的官网地址做的（&lt;script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"&gt;&lt;/script&gt;），没有下。 页面效...
Html5用localStorage简单存储登陆用户名
家元之洋洋的博客
06-13 1247
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>H5的storage&...
VUE—admin登录页面，利用localstorage获取登录名（图文详情）
Poppy_LYT的博客
08-03 4604
VUE—admin登录页面，利用localstorage获取登录名 第一步：写一个公共插件lib>until let local = { get: function (key) { // 存储进去的是字符串所以get的也是字符串，因此要转换成对象 return JSON.parse(localStorage.getItem(key)) }, ...
LocalStorage记住用户和密码功能
12-14
随着HTML5规范的普及，我们不再用cookie来实现记住密码，通常会用的LocalStorage及本地缓存。     对于Cookie来说它只有一个[removed]这一个API可以使用,不管是读取Cookie还是存储Cookie你都只能使用它     然而LocalStorage,你存储的时候有localStorage.setItem(),你读取的时候有localStorage.getItem(),你想要删除的时候有localStorage.removeItem().此外在存储时,它们事以键值对的形式存储的.所以更易于使用.并且localStorge的储存空间大，有5M,并且是
localstorage实现登录注册跳转主页
SugarXiXixi的博客
10-30 2425
实现效果 具体代码 js引用的本地代码，要使用需更改文件路径 登录页 html <head> <meta charset="UTF-8"> <title>登录页面</title> </head> <body> <div id="web"> <div> <span style="c
HTML5 本地存储,用localStorage做一个登录页面.
qq_59369367的博客
11-06 2469
这里只使用localStorage实现一个登录,注册代码,用户注册,的用户名和密码,等信息,存储在浏览器本地存储中,
JS中模拟用户注册登录利用localStorage存储多个值
lanseguhui的博客
07-30 6703
&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
localStorage判断用户是否登录
coco1118的博客
11-27 4476
localStorage类似于cookie,解决了cookie存储空间不足的问题,存储在本地。 以下例子为判断用户是否登录，未登录则跳转到登录界面 admin.js: *@todo 模拟登录 * 判断初次登录时，跳转到登录页 */ var login = localStorage.getItem('login'); $('.loginout').click...
Html、Js基于web储存localStorage下的注册登录及登录验证的简单网页
想娶媳妇的苗同学的博客
07-20 4585
Html、Js基于web储存localStorage下的注册界面、登录界面及登录验证成功弹出跳转的简单网页 实现结果： 注册网页 注册信息存入localStorage （web下存储） 登录网页 注册完成跳转登录界面 验证登录完成 延时跳转至目标网页 实现效果如下：（没来得及美化页面） 登录界面 注册界面 注册完成界面 验证登录界面 **代码实现** *1.Login.html* &...
LocalStorage用户登录
北一的博客
01-02 546
localStorage的使用 localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。 localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。 localStorage 属性是只读的 localStorage 存储、获取、使用数据。 保存数据语法： localStorage.setIte...
h5新特性localstorage的简单应用（记住登录名和密码）
szl199107101035的博客
09-08 6489
我们在制作登录界面的时候回出现一个勾选框，询问我们是否记住账号和密码，当我们勾选了之后下次进来就是上次登录的账号密码，可以直接登录。那这个功能是如何实现的呢？下面我们就是用h5的新特性localstorage来实现。  首先，我们需要了解下localstorage的含义和用法。在客户端h5提供了两种存储方式；一种是localstorage，一种是sessionstorage         下
react简单实现登录注册逻辑（localStorage模拟实现、数据库连接并通过查询数据库实现）
miaomiao博客
07-16 4388
1、搭建样式组件 import styled from 'styled-components'; export const MineContainer = styled.div` flex:1; ` export const PhoneLogin =styled.div` padding:10px; input{ margin:3px; } ` export...
localstorage实现登录注册
最新发布
03-16
localstorage是一种浏览器提供的本地存储机制，可以将数据存储在用户的浏览器中，即使用户关闭浏览器或者电脑，数据也不会丢失。我们可以利用localstorage来实现登录注册功能。 具体实现方法如下： 1. 注册功能 当用户在注册页面输入用户名和密码后，我们可以将这些信息存储在localstorage中。代码如下： ``` // 获取用户名和密码 var username = document.getElementById('username').value; var password = document.getElementById('password').value; // 将用户名和密码存储在localstorage中 localStorage.setItem(username, password); ``` 2. 登录功能 当用户在登录页面输入用户名和密码后，我们可以从localstorage中获取该用户的密码，然后与用户输入的密码进行比较，如果一致则登录成功。代码如下： ``` // 获取用户名和密码 var username = document.getElementById('username').value; var password = document.getElementById('password').value; // 从localstorage中获取该用户的密码 var storedPassword = localStorage.getItem(username); // 比较密码 if (password === storedPassword) { alert('登录成功！'); } else { alert('用户名或密码错误！'); } ``` 需要注意的是，localstorage中存储的数据是以键值对的形式存在的，因此我们可以将用户名作为键，密码作为值存储在localstorage中。在登录时，我们可以根据用户名从localstorage中获取密码，然后进行比较。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值