html5practice/즐겨찾기목록만들기

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>

[edit]

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

html5practice/즐겨찾기목록만들기 (rev. 1.1)

html5practice/즐겨찾기목록만들기

html ¶

javascript ¶