H5ke11--1登录界面一直保存--用本地localStorage存储

目录

代码详解

localStage优点 :一直保存着

注意事项:

storage属性们


代码详解

ke8学校陈老师H5-CSDN博客文章浏览阅读76次。实现H5中新增的三个元素:forEach的使用方法。https://blog.csdn.net/m0_72735063/article/details/134019012即此之后

当然可以分为按按钮保存也可以默认保存

下面我们来看

1获取保存按钮,设置点击事件,把我们写的东西存到localStorage,只有点击按钮才会有

let ls=localStorage;
ls.setItem("user_name",user_name_field.value);

2登录就加载,谁去加载,页面窗口

window的load事件,参考

一加载好就把我们的给显示,如果没有,就把我们的缓存给我们的区域值,这个事件只要登录就会有

let ls=localStorage;
if(ls.getItem("user_name")){user_name_field.value=ls.getItem("user_name")
}

3在上面第一个1我们用的是按钮,下面我们来让他在退出界面前,一直保存我们的信息

window.addEventListener("beforeunload",(event)=>{

其余跟按钮事件一样保存到我们的localStorage缓存

源代码

    let saveb=document.querySelector("input[name=save]");saveb.addEventListener("click",(event)=>{let ls=localStorage;ls.setItem("user_name",user_name_field.value);ls.setItem("pwd",pwd_field.value);ls.setItem("pwd_confirm",pwd_confirm_field.value);ls.setItem("email",email_field.value);})
// 登录就加载window.addEventListener("load",(event)=>{// alert()/let ls=localStorage;if(ls.getItem("user_name")){user_name_field.value=ls.getItem("user_name")}if(ls.getItem("pwd")){pwd_field.value=ls.getItem("pwd")}if(ls.getItem("pwd_confirm")){pwd_confirm_field.value=ls.getItem("pwd_confirm")}if(ls.getItem("email")){email_field.value=ls.getItem("email")}// 相同的})// 关闭页面也会有,不点保存
//     为什么刚刚我localStorage.clear();了还会有呢因为我加了这个自动保存
//     没有下面的,我关闭网页不按保存键内容就消失了window.addEventListener("beforeunload",(event)=>{let ls=localStorage;ls.setItem("user_name",user_name_field.value);ls.setItem("pwd",pwd_field.value);ls.setItem("pwd_confirm",pwd_confirm_field.value);ls.setItem("email",email_field.value);})

localStage优点 :一直保存着

注意事项:

这个localStage多个页面共享的!!

a页面修改了并不会引发a页面的storage事件,

哎只会引发别的网页上面的storage事件,

可以参考H5ke11..--2其他界面也要提取我的locatStarage-CSDN博客文章浏览阅读47次。localStorage就是我们的浏览器缓存在哪都可以用。下面代码是获取打印到我们的页面上。获取浏览器里面的本地缓存。https://blog.csdn.net/m0_72735063/article/details/134470205?spm=1001.2014.3001.5501

storage属性们

storage有这几个属性key,oldvalue,newvalue,url

哪个键被修改

旧值是什么

新值是什么

哪个页面修改了我的

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/190195.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

记一次用jlink调试正常,不进入调试就不能运行的情况

一、概述 我开机会闪烁所有指示灯,但是重新上电时,指示灯并没有闪烁,就像"卡死"了一样。 使用jlink的swd接口进行调试,需要多点几次运行才能跳转到main函数里面。 调试模式第一次点击运行,暂停查看函数堆栈…

Flask学习一:概述

搭建项目 安装框架 pip install Flask第一个程序 from flask import Flaskapp Flask(__name__)app.route(/) def hello_world():return "Hello World"if __name__ __main__:app.run()怎么说呢,感觉还不错的样子。 调试模式 if __name__ __main__:a…

Vue.js2+Cesium1.103.0 十四、绘制视锥,并可实时调整视锥姿态

Vue.js2Cesium1.103.0 十四、绘制视锥&#xff0c;并可实时调整视锥姿态 Demo <template><divid"cesium-container"style"width: 100%; height: 100%;"><divclass"control"style"position: absolute;right: 50px;top: 50px…

第十九章 绘图

目录 Java绘图类 Graphics 类 Graphics2D类 绘制图形 绘图颜色与画笔属性 设置颜色 设置画笔 绘制文本 设置字体 显示文字 显示图片 图像处理 放大与缩小 图像翻转 图像旋转 图像倾斜 Java绘图类 Graphics 类 Grapics 类是所有图形上…

MidJourney笔记(2)-面板使用

MidJourney界面介绍 接着上面的疑问。U1、U2、U3、U4、V1、V2、V3、V4分别代表着什么? U1、U2、U3、U4: U按钮是用于放大图片,数字即表示对应的图片,可以立即生成1024X1024像素大小的图片。这样大家在使用的时候,也方便单独下载。 其中数字顺序如下:

2023-11-18 Android Linux资源限制命令 ulimit,比如ulimit -d 是设置进程占用的最大数据段大小,默认是unlimited。

一、通过ulimit -a 命令可以查看当前的各种资源限制&#xff0c;比如ulimit -d 是 进程占用的最大数据段大小。 # ulimit -a -t: time(cpu-seconds) unlimited -f: file(blocks) unlimited -c: coredump(blocks) 0 -d: data(KiB) unlimited -s:…

屏蔽bing搜索框的今日热点

中国版的Bing简直比百度还恶心了&#xff0c;“今日热点”要是在搜索设置里关闭了就没法提供搜索建议了&#xff0c;不关吧看着又烦人&#xff0c;就像下图这样。另外还有右上角的下载bing app和Rewards图标也闲着没啥用&#xff0c;Rewards图标还老有小红点&#xff0c;真受不…

【giszz笔记】产品设计标准流程【5】

&#xff08;续上回&#xff09; 目录 五、原型设计 1.写在前面的话 2.原型是什么 3.画原型的工具 4.产品经理的复合能力 5.关于原型图 PS&#xff1a;这个系列&#xff0c;主要讨论的是产品设计的一般标准流程。这个流程也许每天都发生在我们的身边&#xff0c;我们也常…

C/C++ 运用VMI接口查询系统信息

Windows Management Instrumentation&#xff08;WMI&#xff09;是一种用于管理和监视Windows操作系统的框架。它为开发人员、系统管理员和自动化工具提供了一种标准的接口&#xff0c;通过这个接口&#xff0c;可以获取有关计算机系统硬件、操作系统和应用程序的信息&#xf…

若依中脱敏

SpringBoot使用自定义注解实现返回数据脱敏操作 在实际项目中&#xff0c;对于敏感数据的保护十分重要&#xff0c;数据脱敏又称数据去隐私化或数据变形&#xff0c;是在给定的规则、策略下对敏感数据进行变换、修改的技术机制&#xff0c;能够在很大程度上解决敏感数据在非可…

Redis(消息队列Stream)

Stream是一个轻量级的消息队列。 Redis中Stream的作用是提供一种高效的消息传递机制&#xff0c;允许多个消费者并行地消费消息&#xff0c;并且不会重复消费已经处理过的消息。它可以用于实现分布式任务队列、日志收集、实时数据处理等场景。Redis中的Stream支持多个消费者组…

医院绩效考核系统源码 医院绩效考核系统方案

医院绩效考核系统源码 医院绩效考核系统是现代医院管理的重要方法和科学的管理工具。良好的绩效管理&#xff0c;有助于带动全院职工的工作积极性&#xff0c;有助于提高工作效率、提高医疗质量、改善服务水平、降低运营成本&#xff0c;全面提升医院的精细化管理水平。 医院绩…