More actions
[[pagelist(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>
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();
}