WEB前端数据存储_本地存储案例

前端用什么开发工具|前端登录页面开发|美团前端开发面试

html 代码

<!DOCTYPE html>
<head>
    <meta charset=”utf-8″ />
    <title>HTML5本地存储之web Storage篇</title>
</head>
<body>
    <div style=”border: 2px dashed #ccc;width:320px;text-align:center;”>
        <label for=”user_name”>姓名:</label>
        <input type=”text” id=”user_name” name=”user_name” class=”text” />
        <br/>
        <label for=”mobilephone”>手机:</label>
        <input type=”text” id=”mobilephone” name=”mobilephone” />
        <br/>
        <label for=”company”>公司:</label>
        <input type=”text” id=”company” name=”company” />
        <br/>
        <input type=”button” onclick=”save()” value=”新增记录” />
        <hr/>
        <label for=”search_phone”>输入手机号:</label>
        <input type=”text” id=”search_phone” name=”search_phone” />
        <input type=”button” onclick=”find()” value=”查找机主” />
        <p id=”find_result”>
            <br/>
        </p>
    </div>
    <br/>
    <div id=”list”>
    </div>
    <script type=”text/javascript”>
        function loadAll() {
            var list = document.getElementById(“list”);
            if (localStorage.length > 0) {
                var result = “<table border=’1′>”;
                result += “<tr><td>姓名</td><td>手机</td><td>公司</td></tr>”;
                for (var i = 0; i < localStorage.length; i++) {
                    var mobilephone = localStorage.key(i);
                    console.log(mobilephone, 3333)
                    var str = localStorage.getItem(mobilephone);
                    console.log(str, 11)
                    var contact = JSON.parse(str);
                    result += “<tr><td>” + contact.user_name + “</td><td>” + contact.mobilephone + “</td><td>” + contact.company + “</td></tr>”;
                }
                result += “</table>”;
                list.innerHTML = result;
            } else {
                list.innerHTML = “目前数据为空,赶紧开始加入联系人吧”;
            }
        }
        //保存数据
        function save() {
            localStorage.clear();//清空缓存
            var contact = new Object;
            contact.user_name = document.getElementById(“user_name”).value;
            contact.mobilephone = document.getElementById(“mobilephone”).value;
            contact.company = document.getElementById(“company”).value;
            var str = JSON.stringify(contact);
            localStorage.setItem(contact.mobilephone, str);
            loadAll();
        }
        function find() {
            var search_phone = document.getElementById(“search_phone”).value;
            var name = localStorage.getItem(search_phone);
            var contact = JSON.parse(name);
            console.log(typeof (contact))
            var find_result = document.getElementById(“find_result”);
            find_result.innerHTML = search_phone + “的机主是:” + contact.user_name;
        }
            //将所有存储在localStorage中的对象提取出来,并展现到界面上
    </script>
</body>
</html>

nodejs前端开发工具|前端开发ide 知乎|前端 可视化 开发工具

» 本文来自:前端开发者 » 《WEB前端数据存储_本地存储案例》
» 本文链接地址:https://www.rokub.com/5212.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!