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

哪个键被修改

旧值是什么

新值是什么

哪个页面修改了我的