<html>
<head>
    
</head>    
<script>
//insert
var currdata = ''    
function insertRec(){
    
   
    if (localStorage.getItem('records')){
    currdata = localStorage.getItem('records');
    }
    var data = document.getElementById("record").value;
   
     if (document.getElementById("btn").innerHTML == 'Update'){
        var oldrecord = document.getElementById("oldrecord").value;
        var newdata =   currdata.replace(oldrecord,data);
         localStorage.setItem('records',newdata);
         document.getElementById("btn").innerHTML = 'Store';
         document.getElementById("record").value = '';
      }
    else {
    localStorage.setItem('records',currdata +  data + "|");
    alert('record added!');
    }
   
    displayRec();
}    
    
//delete
function deleteRec(rec){
confirm('are you sure you want to delete ' + rec);
    var deletedata = localStorage.getItem('records');
    
     deletedata = deletedata.replace(rec + "|","");
     localStorage.setItem('records',deletedata);
   //Bald idiot...you are here!!!!! watch the pipes!!!
    //do the update by 745
}     
    
//update
function updateRec(rectoupdate){
    document.getElementById("record").value = rectoupdate;
    document.getElementById("btn").innerHTML = 'Update'; 
    document.getElementById("oldrecord").value = rectoupdate;
    
    
}      
    
//display
function displayRec(){
    document.getElementById("showRecords").innerHTML = '';
    var datatoshow = localStorage.getItem('records');
    var dataarr  = datatoshow.split('|');
    for (var i =0 ;i<dataarr.length - 1;i++){
        document.getElementById("showRecords").innerHTML += dataarr[i] + ' <button onclick="deleteRec(\'' + dataarr[i] + '\');">Delete</button> <button onclick="updateRec(\'' + dataarr[i] + '\');">Update</button><br>';
    }
    
    
}    
    
</script>


<body onload="displayRec();">
<span id="showRecords"></span>
    
<input type="hidden" id="oldrecord" value="">    
<input type="text" id = "record" />
<button onclick="insertRec(event);" id="btn">Store</button> 
</body>
</html>
