简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Article  >  Web Front-end  >  html5 learning journey-simple database development of html5 (18)

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

黄舟
黄舟Original
2017-02-17 14:56:241218browse

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>

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

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

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

! ! ! ! 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：
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
Previous article：Html5 learning journey-html5 message notepad development (17)Next article：Html5 learning journey-html5 message notepad development (17)

Related articles

See more