More actions
imported>beonit No edit summary |
(Repair batch-0008 pages from live compare) |
||
| (2 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
[[pagelist(html5practice/*)]] | [[pagelist(html5practice/*)]] | ||
== 후기 == | |||
* 원래 목적은 naver api를 끌고 와서 별표 찍는 연습을 만들려고 했는데. 이건 뭐. ajax cross domain 문제로 접근 불가. 난이도 하향. 로컬 목록을 사용자가 만들어서 그걸 즐겨찾기 추가 삭제 하는 코드를 만들었음. 기능과 UI가 안습이지만, 그래도. 만들었음. | |||
== html == | == html == | ||
<html xmlns="http://www.w3.org/1999/xhtml"> | <html xmlns="http://www.w3.org/1999/xhtml"> | ||
| Line 36: | Line 38: | ||
== javascript == | == javascript == | ||
function doSetItem(aForm) { | function doSetItem(aForm) { | ||
localStorage.setItem( document.formInput.elements | localStorage.setItem( document.formInput.elements['textInput'].value, "false"); | ||
document.formInput.elements | document.formInput.elements['textInput'].value = ""; | ||
doShowAll(); | doShowAll(); | ||
} | } | ||
| Line 105: | Line 107: | ||
doShowAll(); | doShowAll(); | ||
} | } | ||
Latest revision as of 01:40, 27 March 2026
[[pagelist(html5practice/*)]]
후기
- 원래 목적은 naver api를 끌고 와서 별표 찍는 연습을 만들려고 했는데. 이건 뭐. ajax cross domain 문제로 접근 불가. 난이도 하향. 로컬 목록을 사용자가 만들어서 그걸 즐겨찾기 추가 삭제 하는 코드를 만들었음. 기능과 UI가 안습이지만, 그래도. 만들었음.
html
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>html favorite list test</title> <script language="javascript" src="./favorite.js"> </script> </head> <body onload="doShowAll()"> <section id="input"> <h1>add to list</h1> <form name="formInput"> <input type="text" id="textInput"/> <input type="button" value="add to list" onclick="doSetItem(this.form)"/> <input type="button" value="clear" onclick="doClearAll()"/> </form> </section> <section> <h1>favorite</h1> <section id="favoriteList"> </section> </section> <section> <h1>allList</h1> <section id="allList"> </section> </section> </body> </html>
javascript
function doSetItem(aForm) {
localStorage.setItem( document.formInput.elements['textInput'].value, "false");
document.formInput.elements['textInput'].value = "";
doShowAll();
}
function doRemoveItem(itemName) {
localStorage.setItem(itemName, "false");
doShowAll();
}
function doSetFavorite(eTD){
console.log(eTD.innerHTML);
localStorage.removeItem(eTD.innerHTML);
localStorage.setItem(eTD.innerHTML, "true");
doShowAll();
}
function doRemoveFavorite(eTD){
console.log(eTD.innerHTML);
localStorage.removeItem(eTD.innerHTML);
localStorage.setItem(eTD.innerHTML, "false");
doShowAll();
}
function doShowFavorite(){
console.log("do show all");
var key = "";
var pairs = "<table><tr><th>Name</th><th>Value</th></tr>\n";
var i=0;
for (i=0; i<=localStorage.length-1; i++) {
key = localStorage.key(i);
value = localStorage.getItem(key);
if( value == "true" )
pairs += "<tr><td onclick=doRemoveFavorite(this)>"+key+"</td>\n<td>"+value+"</td></tr>\n";
}
if (localStorage.length == 0){
pairs += "<tr><td><i>empty</i></td>\n<td><i>empty</i></td></tr>\n";
}
pairs += "</table>";
document.getElementById('favoriteList').innerHTML = pairs;
console.log("end do show all");
}
function doShowNFavorite(){
var key = "";
var pairs = "<table><tr><th>Name</th><th>Value</th></tr>\n";
var i=0;
for (i=0; i<=localStorage.length-1; i++) {
key = localStorage.key(i);
value = localStorage.getItem(key);
if( value == "false" )
pairs += "<tr><td onclick=doSetFavorite(this)>"+key+"</td>\n<td>"+value+"</td></tr>\n";
}
if (localStorage.length == 0){
pairs += "<tr><td><i>empty</i></td>\n<td><i>empty</i></td></tr>\n";
}
pairs += "</table>";
document.getElementById('allList').innerHTML = pairs;
}
function doShowAll() {
doShowNFavorite();
doShowFavorite();
}
function doClearAll(){
localStorage.clear();
doShowAll();
}