Save a toogle state to Local Storage

HTML

<table id="highlight">
    <tr>
        <td>Row 1</td>
        <td>
            <input>
        </td>
    </tr>
    <tr>
        <td>Row 2</td>
        <td>
            <input>
        </td>
    </tr>
    <tr>
        <td>Row 3</td>
        <td>
            <input>
        </td>
    </tr>
</table>

<table id="highlight2">
    <tr>
        <td>Row 1</td>
        <td>
            <input>
        </td>
    </tr>
    <tr>
        <td>Row 2</td>
        <td>
            <input>
        </td>
    </tr>
    <tr>
        <td>Row 3</td>
        <td>
            <input>
        </td>
    </tr>
</table>

<table id="table3">
    <tr>
        <td>Row 1</td>
        <td>
            <input>
        </td>
    </tr>
    <tr>
        <td>Row 2</td>
        <td>
            <input>
        </td>
    </tr>
    <tr>
        <td>Row 3</td>
        <td>
            <input>
        </td>
    </tr>
</table>

CSS

.highlight {
    color: blue;
    font-weight: bold;
}

table {
    width: 100%;
    border: 1px solid red
}

JavaScript

$("table[id]").each(function() {
    var id = this.id;
    var highlights = JSON.parse(localStorage[id] || "[]")
    if (highlights.length)
        $("tr",this).each(function(i) {
            $(this).toggleClass("highlight", highlights[i])
        });

}).find("tr").click(function(e) {
    $(this).toggleClass("highlight");
    var table=$(this).closest("table"),
    	id=table.attr("id")
    localStorage[id] = JSON.stringify(
        $("tr",table).map(function() {
            return $(this).hasClass("highlight")
        }).get()
    )

});