add auto-increment or timestamp - javascript, jstorage
<p>I'm trying to implement <em>jstorage</em> on my website. I'm new to JavaScript and thus need some help here.</p>

<p><em>jstorage</em> requires <code>Key</code> and <code>Value</code> to be given for each saved row.</p>

<p>I would like <code>Key</code> to be filled in automatically with either with auto-increment value or timestamp, whichever is easier - values need to be unique.</p>

<p>Here is the whole code:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;jStorage - simple JavaScript plugin to store data locally&lt;/title&gt;
        &lt;meta http-equiv="content-type" content="text/html; charset=utf-8"&gt;

        &lt;style type="text/css"&gt;

            body{
                font-family: Sans-serif;
                font-size: 13px;
                color: #333;
                background: blue;
            }
            a {
                color: red;
            }
            table{
                border: 1px solid white;
                ;
            }

            h1{
                padding-top: 50px;
                font-size: 26px;
                font-weight: bold;
                border-bottom: 3px solid #CDEB8B;
            }

            h2{
                font-size: 18px;
                font-weight: bold;
                border-top: 1px solid #EEE;
                border-bottom: 3px solid #CDEB8B;
                margin-top: 20px;
                padding-top: 20px;
            }

            h3{
                font-size: 14px;
                font-weight: bold;
                color: red;
            }

            td{
                padding: 3px;
                border-right: 1px solid #CDEB8B;
                border-bottom: 1px solid #CDEB8B;
            }

            thead{
                background: url(img/gradientform.png) repeat-x; ;
                color: white;
            }

            .container{
                width: 190px;
                margin: 10px auto;
            }
            .delimg {

                background: url(img/details_close.png) no-repeat;
                width: 20px;
                height: 20px;
            }
            .addimg {
                background: url(img/details_open.png) no-repeat;
                width: 20px;
                height: 20px;
            }
        &lt;/style&gt;


        &lt;script src="js/jquery.js"&gt;&lt;/script&gt;
        &lt;script src="static/jquery.json-2.3.js"&gt;&lt;/script&gt;

        &lt;script src="static/jstorage.js"&gt;&lt;/script&gt;


        &lt;script&gt;
            function insert_value(){
                var row = document.createElement("tr"),
                    key = document.getElementById('key').value,
                    val = document.getElementById('val').value;

                if(!key){
                    alert("KEY NEEDS TO BE SET!");
                    document.getElementById('key').focus();
                    return;
                }
                $.jStorage.set(key, val);
                document.getElementById('key').value = "";
                document.getElementById('val').value = "";
                reDraw();
            }

            function get_value(){
                var value = $.jStorage.get(document.getElementById("key2").value);
                alert(value);
                document.getElementById('key2').value = "";
            }

            function reDraw(){
                var row, del, index;
                var rows = document.getElementsByTagName("tr");
                for(var i=rows.length-1; i&gt;=0; i--){
                    if(rows[i].className == "rida"){
                        rows[i].parentNode.removeChild(rows[i]);
                    }
                }

                index = $.jStorage.index();
                for(var i=0; i&lt;index.length;i++){
                    row = document.createElement("tr");
                    row.className = "rida";
                    var t = document.createElement("td");
                    t.innerHTML = index[i];
                    row.appendChild(t);
                    t = document.createElement("td");
                    t.innerHTML  = $.jStorage.get(index[i]);
                    row.appendChild(t);
                    del = document.createElement("a");
                    del.href = "javascript:void(0)";
                    del.innerHTML = "&lt;div class='delimg'&gt;&lt;/div&gt;";
                    (function(i){
                        del.onclick = function(){
                            $.jStorage.deleteKey(i);
                            reDraw();
                        };
                    })(index[i])
                    t = document.createElement("td");
                    t.appendChild(del)
                    row.appendChild(t);
                    document.getElementById("tulemused").appendChild(row);

                }
            }
        &lt;/script&gt;

        &lt;!-- Exception Hub start --&gt;
        &lt;script type="text/javascript"&gt;
            var ehHost = (("https:" == document.location.protocol) ? "https://" : "http://");
            document.write(unescape("%3Cscript src='" + ehHost + "js.exceptionhub.com/javascripts/eh.js' type='text/javascript'%3E%3C/script%3E"));
        &lt;/script&gt;
        &lt;script&gt;
            ExceptionHub.setup("b83fb652800fa143596deb6600fd9a2d", 116, 'production');
        &lt;/script&gt;
        &lt;!-- Exception Hub end --&gt;

    &lt;/head&gt;
    &lt;body&gt;

    &lt;div class="container"&gt;


    &lt;table cellspacing="0" cellpadding="0" style="width: 100%"&gt;
    &lt;thead&gt;
        &lt;tr&gt;&lt;td width="120"&gt;KEY&lt;/td&gt;&lt;td&gt;VALUE&lt;/td&gt;&lt;td width="50"&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody id="tulemused"&gt;&lt;/tbody&gt;

    &lt;tfoot&gt;
        &lt;tr&gt;
            &lt;td&gt;&lt;input type="text" id="key" name="key" value="" style="width: 110px;" /&gt;&lt;/td&gt;
            &lt;td&gt;&lt;input type="text" id="val" name="val" value="" style="width: 98%" /&gt;&lt;/td&gt;
            &lt;td&gt;&lt;a href="javascript:insert_value()"&gt;&lt;div class="addimg"&gt;&lt;/div&gt;&lt;/a&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;&lt;input type="text" id="key2" name="key2" value="" style="width: 110px;" /&gt;&lt;/td&gt;

            &lt;td&gt;Clicking "GET" alerts the value for provided key with the method &lt;em&gt;$.jStorage.get(key)&lt;/em&gt;&lt;/td&gt;
            &lt;td&gt;&lt;a href="javascript:get_value()"&gt;GET&lt;/a&gt;&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tfoot&gt;
    &lt;/table&gt;
    &lt;script&gt;reDraw()&lt;/script&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>
