Home > Web Front-end > H5 Tutorial > body text

html5 learning journey-simple database development of html5 (18)

黄舟
Release: 2017-02-17 14:56:24
Original
1308 people have browsed it

It actually simulates the database function of HTML5, using key-value pairs.

! ! ! ! ! ! Without further ado, the code

index.html is the code

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>H5表格提交</title>
    <script src="appWeb.js"></script></head><body>
    <table>
        <tr><td>姓名:</td><td><input type="text" id="name"></td></tr>
        <tr><td>email:</td><td><input type="text" id="email"></td></tr>
        <tr><td>电话号码:</td><td><input type="text" id="tel"></td></tr>
        <tr><td>备注:</td><td><input type="text" id="memo"></td></tr>
        <tr>
            <td></td>
            <td><input type="button" value="保存" onclick="saveStorage()"></td>
        </tr>
    </table>
    <hr/><p>检索:    <input type="text" id="find">
    <input type="button" value="检索" onclick="findStorage(&#39;msg&#39;)"></p><p id="msg"></p></body></html>
Copy after login
Copy after login

! ! ! ! js code

function saveStorage(){
    var data = new Object();
    data.name = document.getElementById("name").value;
    data.email = document.getElementById("email").value;
    data.tel = document.getElementById("tel").value;
    data.memo = document.getElementById("memo").value;
    var str = JSON.stringify(data);
    localStorage.setItem(data.name,str);
    alert("data saved");}
function findStorage(id){
    var find = document.getElementById("find").value;
    var str = localStorage.getItem(find);
    var data = JSON.parse(str);
    var result = "name:"+data.name+"<br/>";
        result += "email:"+data.email+"<br/>";
        result += "tel:"+data.tel+"<br/>";
        result += "memo:"+data.memo+"<br/>";
    var target = document.getElementById(id);
    target.innerHTML = result;}
Copy after login
Copy after login

! ! ! ! The rendering

html5 learning journey-simple database development of html5 (18)

actually simulates the database function of HTML5, using key-value pairs.

! ! ! ! ! ! Without further ado, the code

index.html is the code

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>H5表格提交</title>
    <script src="appWeb.js"></script></head><body>
    <table>
        <tr><td>姓名:</td><td><input type="text" id="name"></td></tr>
        <tr><td>email:</td><td><input type="text" id="email"></td></tr>
        <tr><td>电话号码:</td><td><input type="text" id="tel"></td></tr>
        <tr><td>备注:</td><td><input type="text" id="memo"></td></tr>
        <tr>
            <td></td>
            <td><input type="button" value="保存" onclick="saveStorage()"></td>
        </tr>
    </table>
    <hr/><p>检索:    <input type="text" id="find">
    <input type="button" value="检索" onclick="findStorage(&#39;msg&#39;)"></p><p id="msg"></p></body></html>
Copy after login
Copy after login

! ! ! ! js code

function saveStorage(){
    var data = new Object();
    data.name = document.getElementById("name").value;
    data.email = document.getElementById("email").value;
    data.tel = document.getElementById("tel").value;
    data.memo = document.getElementById("memo").value;
    var str = JSON.stringify(data);
    localStorage.setItem(data.name,str);
    alert("data saved");}
function findStorage(id){
    var find = document.getElementById("find").value;
    var str = localStorage.getItem(find);
    var data = JSON.parse(str);
    var result = "name:"+data.name+"<br/>";
        result += "email:"+data.email+"<br/>";
        result += "tel:"+data.tel+"<br/>";
        result += "memo:"+data.memo+"<br/>";
    var target = document.getElementById(id);
    target.innerHTML = result;}
Copy after login
Copy after login

! ! ! ! Rendering

html5 learning journey-simple database development of html5 (18)

The above is the content of html5 learning journey-html5 simple database development (18). For more related content, please pay attention to the PHP Chinese website (www.php.cn )!


source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template