local存储做用户信息卡

万能守恒定律

已于 2023-04-26 08:58:10 修改

阅读量373

点赞数 4

分类专栏： h5+c3 文章标签： javascript 前端 html5

于 2022-03-31 12:53:46 首次发布

本文链接：https://blog.csdn.net/qq_50951790/article/details/123869105

版权

h5+c3 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>用户信息卡</h1>

    <p>姓名：<input type="text" name="" id="username"></p>
    <p>email：<input type="email" name="" id="email"></p>
    <p>电话号码：<input type="tel" name="" id="tel"></p>
    <p>说明：<input type="text" name="" id="speak"></p>
    <button onclick="saveLocal()">保存</button>
    <p>查询：<input type="text" name="" id="selectName"></p>
    <button onclick="getLocal()" >按姓名查询</button>
   
    <p><span id="detial"></span></p>
</body>
<script>
    var username = document.querySelector("#username")
    var email = document.querySelector("#email")
    var tel = document.querySelector("#tel")
    var speak = document.querySelector("#speak")
    var detial = document.querySelector("#detial")
    var arrList =[]
    

    function saveLocal(){
        if(window.localStorage){
            //获取数据
           var data = {"username":username.value,"email":email.value,"tel":tel.value,"speak":speak.value}
            //存入数组
            arrList.push(data)
            //将数据转为json
            var arrList2 = JSON.stringify(arrList)
            //console.log(arrList2)
            //存储
            localStorage.setItem("data",arrList2)
        } 
        else{
            alert("您的浏览器不支持localStorage")
        }
    }

    function getLocal(){
        if(window.localStorage){
            //获取查询的数据
            var selectName = document.querySelector("#selectName").value
            //获取存储的值
            var save = localStorage.getItem("data")
            var join = []
            //解析json格式
            join=JSON.parse(save)
            //console.log(join)
            //遍历所有对象
            join.forEach(e => {
                if(e.username==selectName){
                    detial.innerHTML += "姓名:"+e.username+"<br>EMAIL:"+e.email+"<br>电话号码:"+e.tel+"<br>备注:"+e.speak
                }
            });

        } 
        else{
            alert("您的浏览器不支持localStorage")
        }
    }

</script>
</html>

可以结合我上一章所写的local存储一起学习（搜索查询时，重点是要存为json格式，然后去里面取数据）