html5 learning journey-simple database development of html5 (18)-H5 Tutorial-php.cn

Table of Contents

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

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

index.html is the code

! ! ! ! js code

! ! ! ! The rendering

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

! ! ! ! Rendering

Home

Web Front-end

H5 Tutorial

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

黄舟

Feb 17, 2017 pm 02:56 PM

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

! ! ! ! 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

! ! ! ! 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

! ! ! ! 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

! ! ! ! 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 )!

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