localstorage application

Run through versions for a step through.

by jazahn

HTML

<table id="mytable" style="display: none; border: 1px black solid">
    <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Color</th>
        <th>Has sword</th>
    </tr>
</table>

<div>
    <label for="name">Name: </label>
    <input id="name" type="text"/>
</div>
<div>
    <label for="color">Color: </label>
    <input id="color" type="text"/>
</div>
<div>
    <button id="save_button" type="button">Save</button>
    <button id="refresh_table" type="button">Refresh</button>
</div>

CSS

table, th, td {
    border: 1px black solid;
}
th, td {
    padding: 5px
}

JavaScript

var saveButton = document.getElementById("save_button");
var refresh = document.getElementById("refresh_table");
var nameEl = document.getElementById("name");
var colorEl = document.getElementById("color");
var mytable = document.getElementById("mytable");

var Ninjas = function Ninjas(config){
    this.name = config.name ? config.name : 'unnamed';
    this.json = '';
    this.array;
    this.get();
}
Ninjas.prototype.get = function(){
    console.log(this.name);
    if(window.localStorage[this.name] !== undefined){
        this.json = window.localStorage[this.name];
        this.array = JSON.parse(this.json);
        console.log(this.array);
    }
}
Ninjas.prototype.refreshTable = function(){
    var els = document.getElementsByTagName("td");
    for(var i = 0; i < els.length; i++){
        // we want to remove the tr
        els[i].parentNode.parentNode.removeChild(els[i].parentNode);    
    }
    this.get();
    if(window.localStorage.ninjas !== undefined){
        var ninjaArray = JSON.parse(window.localStorage.ninjas);
        if(ninjaArray.length > 0){
            mytable.style.display = "block";
            for(var i=0; i < ninjaArray.length; i++){
                var objLiteral = ninjaArray[i];
                var ninjaObject = new Ninja(objLiteral);
                
                mytable.innerHTML += ninjaObject.printRow();
                
            }
        }
    
    
    }
}

var ninjas = new Ninjas({name: 'ninjas'});

refresh.addEventListener('click', function(){
    ninjas.refreshTable();
});
window.addEventListener('load', function(){
    ninjas.refreshTable();
});

var Ninja = function Ninja(obj){
    this.name = obj.name ? obj.name : 'No name';
    this.color = obj.color ? obj.color : 'black';    
    this.id = obj.id ? obj.id : 0;    
}
Ninja.prototype.printRow = function(){
    return "<tr><td>" + this.id + "</td><td>" + this.name + "</td><td>" + this.color + "</td><td>" + "<input id='ninja"+this.id+"' type='checkbox'>" + "</td></tr>";  ...