0

我正在尝试在我的网站上实现jstorage 。我是 JavaScript 新手，因此在这里需要一些帮助。

jstorage需要Key和Value为每个保存的行提供。

我想Key用自动增量值或时间戳自动填充，以更容易者为准 - 值必须是唯一的。

这是整个代码：

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

        <style type="text/css">

            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;
            }
        </style>


        <script src="js/jquery.js"></script>
        <script src="static/jquery.json-2.3.js"></script>

        <script src="static/jstorage.js"></script>


        <script>
            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>=0; i--){
                    if(rows[i].className == "rida"){
                        rows[i].parentNode.removeChild(rows[i]);
                    }
                }

                index = $.jStorage.index();
                for(var i=0; i<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 = "<div class='delimg'></div>";
                    (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);

                }
            }
        </script>

        <!-- Exception Hub start -->
        <script type="text/javascript">
            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"));
        </script>
        <script>
            ExceptionHub.setup("b83fb652800fa143596deb6600fd9a2d", 116, 'production');
        </script>
        <!-- Exception Hub end -->

    </head>
    <body>

    <div class="container">


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

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

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

1 回答 1

0

JavaScript：

function uniqid()
{
    var newDate = new Date;
    return newDate.getTime();
}
于 2012-04-23T11:00:57.027 回答