html5-localstorage操作（小demo）

最新推荐文章于 2024-06-17 01:19:49 发布

guo_tonight

最新推荐文章于 2024-06-17 01:19:49 发布

阅读量371

点赞数

分类专栏： html5 文章标签： html5

本文链接：https://blog.csdn.net/guo_tonight/article/details/77858102

版权

html5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="get">
        <label for="name">姓名：</label>
        <input type="text" id="name">
        <br>
        <label for="mobilephone">手机号：</label>
        <input type="text" id="mobilephone">
        <br>
        <input type="button" id="add" value="添加">
        <hr>
    </form>
    <form action="get">
        <label for="search"></label>
        <input type="text" id="search">
        <input type="button" value="查找姓名" id="search-name">
        <div id="showPhone"></div>
    </form>
    <div id="show"></div>
    <script>
        //向localStorage中添加健名和值
        var userName = document.getElementById('name');
        var mobilephone = document.getElementById("mobilephone");
        var addButton = document.getElementById("add");
        addButton.addEventListener("click",function(){
            if(window.localStorage){
                localStorage.setItem(userName.value,mobilephone.value);//这里username对应的是姓名，如果是mobile对应的是该用户的手机号，放在localstorage中，以键名-键值存储
            }
        },false);

        console.log(typeof undefined);
        //寻找是否有名为name的手机号
        var searchName = document.getElementById("search-name");
        var search = document.getElementById("search");
        var showPhone= document.getElementById("showPhone");
        searchName.addEventListener('click',function(){
            if(window.localStorage){
                var local = localStorage.getItem(search.value);
                if(typeof(local)!= "undefined"){
                    var str = search.value + "的手机号是 ：" + local ; 
                    showPhone.innerHTML =str; 
                }
            }
        },false);


        //将所有添加的名字和手机号输出
        var show = document.getElementById("show");
        var ulTag = document.createElement("ul");
        for(var i = 0; i<localStorage.length;i++){
            var showname = localStorage.key(i);
            var showmobile = localStorage.getItem(showname);
            var StrNew = "姓名是："+showname+" , "+"手机号是："+showmobile;
            var liTag = document.createElement("li");
            liTag.innerHTML = StrNew;
            ulTag.appendChild(liTag);
        }
        show.appendChild(ulTag);
    </script>
</body>
</html>

guo_tonight

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5-localstorage操作（小demo）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <form action="get"> <label for="name">姓名：</label> <input type="text" id
复制链接

扫一扫

专栏目录