简体中文（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-html5 message notepad development (17)

Html5 learning journey-html5 message notepad development (17)

黄舟
黄舟Original
2017-02-17 14:54:162058browse

Development of web message notepad

! ! ! ! ! The code is as follows

index.html code

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>H5表格提交</title>
    <script src="appWeb.js"></script></head><body>
    <p id="msg"></p>
    <textarea id="memo" cols="60" rows="10"></textarea><br/>
    <input type="button" value="追加数据" onclick="saveStorage(&#39;memo&#39;)">
    <input type="button" value="删除数据" onclick="clearStorage()"></body></html>

js code

function saveStorage(id){
    var data = document.getElementById(id).value;    var time = new Date().getTime();
    localStorage.setItem(time,data);
    loadStorage(&#39;msg&#39;);
}function loadStorage(id){
    var result = "<table border = &#39;1&#39;>";    for(var i = 0;i < loadStorage.length;i++){        var key = localStorage.key(i);        var value = localStorage.getItem(key);        var date = new Date();
        date.setTime(key);
        result += "<tr><td>"+value+"</td><td>"+date+"</td></tr>";
    }
    result += "</table>";    var target = document.getElementById(id);
    target.innerHTML = result;
}function clearStorage(){
    localStorage.clear();
    loadStorage(&#39;msg&#39;);
}

! ! ! ! Rendering

Html5 learning journey-html5 message notepad development (17)

Development of web message notepad

! ! ! ! ! The code is as follows

index.html code

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>H5表格提交</title>
    <script src="appWeb.js"></script></head><body>
    <p id="msg"></p>
    <textarea id="memo" cols="60" rows="10"></textarea><br/>
    <input type="button" value="追加数据" onclick="saveStorage(&#39;memo&#39;)">
    <input type="button" value="删除数据" onclick="clearStorage()"></body></html>

js code

function saveStorage(id){
    var data = document.getElementById(id).value;    var time = new Date().getTime();
    localStorage.setItem(time,data);
    loadStorage(&#39;msg&#39;);
}function loadStorage(id){
    var result = "<table border = &#39;1&#39;>";    for(var i = 0;i < loadStorage.length;i++){        var key = localStorage.key(i);        var value = localStorage.getItem(key);        var date = new Date();
        date.setTime(key);
        result += "<tr><td>"+value+"</td><td>"+date+"</td></tr>";
    }
    result += "</table>";    var target = document.getElementById(id);
    target.innerHTML = result;
}function clearStorage(){
    localStorage.clear();
    loadStorage(&#39;msg&#39;);
}

! ! ! ! Rendering

Html5 learning journey-html5 message notepad development (17)

The above is the content of the Html5 learning journey-html5 message notepad development (17). 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 web storage overview (16)Next article：Html5 learning journey-Html5 web storage overview (16)

Related articles

See more