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