Html5 학습 여정-html5 메시지 메모장 개발 (17)
- 黄舟원래의
- 2017-02-17 14:54:162061검색
웹 메시지 메모장 개발
! ! ! ! ! 코드는
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('memo')">
<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('msg');
}function loadStorage(id){
var result = "<table border = '1'>"; 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('msg');
}와 같습니다! ! ! ! 렌더링
웹 메시지 메모장 개발
! ! ! ! ! 코드는
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('memo')">
<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('msg');
}function loadStorage(id){
var result = "<table border = '1'>"; 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('msg');
}와 같습니다! ! ! ! 렌더링
위 내용은 Html5 학습여정-html5 메시지 메모장 개발(17) 내용이며, 더 많은 관련 내용은 PHP 중국어 홈페이지(www)를 참고해주세요. .php.cn)!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.