sample: paint expired table rows with jQuery

HTML

<input type="text" id="text">
 <input type="button" onclick="huyasu()" value="項目を追加">
 <input type="button" onclick="clearData()" value="消去">
 <table id="table"></table>

JavaScript

/*---- 関数 : 項目を追加 ----*/

function huyasu( text ){
 text = text || document.getElementById( "text" ).value;
 document.getElementById("text").value = "";
 var table = document.getElementById( "table" );
 var tr = table.appendChild( document.createElement("tr") );
 var td = tr.appendChild( document.createElement("td") );
 td.appendChild( document.createTextNode( text ) );
 if( window.localStorage ){
 var key = "data_"+( table.rows.length-1 );
 localStorage.setItem( key, escape( text ) );
 }
 }
/*---- 関数 : 消去 ----*/

function clearData(){
 if( ! window.localStorage ){ return }
 document.getElementById("table").innerHTML = "";
 for(var i=0;i<localStorage.length;i++){
 var key = localStorage.key( i );
 if( key.match(/^data_/) ){
 localStorage.removeItem( key );
 i--;
 }
 }
 }

 /*---- 関数 : テーブルを初期化 ----*/

function initTable(){
 if( ! window.localStorage ){ return }
 var data = localStorage;
 for(var i=0;i<data.length;i++){
 if( data.key( i ).match(/^data_/) ){
 var text = data.getItem( data.key( i ) );
 huyasu( unescape( text ) );
 }
 }
 }

 /*---- イベントセット ----*/

window.addEventListener( "DOMContentLoaded", initTable, false );