検索

ホームページ  >  記事  >  ウェブフロントエンド  >  HTML5 学習の旅 - HTML5 メッセージ メモ帳の開発 (17)

HTML5 学習の旅 - HTML5 メッセージ メモ帳の開発 (17)

黄舟
黄舟オリジナル
2017-02-17 14:54:162126ブラウズ

Webメッセージメモ帳の開発

! ！ ！ ！ ！コードは以下の通りです

index.htmlコード

<!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コード

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

! ！ ！ ！レンダリング

HTML5 学習の旅 - HTML5 メッセージ メモ帳の開発 (17)

Webメッセージメモ帳の開発

! ！ ！ ！ ！コードは以下の通りです

index.htmlコード

<!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コード

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

! ！ ！ ！レンダリング

HTML5 学習の旅 - HTML5 メッセージ メモ帳の開発 (17)

上記は、Html5 学習の旅 - html5 メッセージ メモ帳の開発 (17) の内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。


声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：HTML5 学習の旅 - Html5 Web ストレージの概要 (16)次の記事：HTML5 学習の旅 - Html5 Web ストレージの概要 (16)

関連記事

続きを見る