Question

我想将输入也作为表单中的输出。我复制了下面的代码，因为我只想知道如何获得输出。

我认为我必须改变这个

<input type="button" value="load" onclick="load_local();"/

所以当我点击一个按钮时，我会在一个像表格

的框中得到这个值

<!DOCTYPE HTML>

    <html>
        <head>
            <TITLE>HTML5 local storage tester (testbed)</TITLE>
        </head>
        <body>
            <div id="output_area" 
            style="position:relative;width:100%;height:200px;overflow:auto;
            border: dotted 1px #ff0000;">
            </div>

            <div>
                <input id="local_storage_key" type="text" />
                <input id="local_storage_value" type="text" />
            </div>

            <div>
                <input type="button" value="load" onclick="load_local();"/>
                <input type="button" value="store" onclick="store_local();"/>
            </div>
            <script id="this_page_js" type="text/javascript">

            /* store some string data to local storage
                This is using some text input elements on the page
                for input.*/

            function store_local(domid_prefix){
                var keyinput = document.getElementById('local_storage_key').value;
                var valinput = document.getElementById('local_storage_value').value;
                try{
                    if(typeof(window.localStorage) != 'undefined'){
                    window.localStorage.setItem(keyinput,valinput);
                    }
                    else{
                        throw "window.localStorage, not defined";
                    }
                }
                catch(err){
                    output_str("store_local,error," + err);
                }
            }

            /* load some string data from local storage
                This is using some text input elements on the page
                for the key name input and value output.*/

            function load_local(domid_prefix){
                var keyinput = document.getElementById('local_storage_key').value;
              var valoutput = document.getElementById('local_storage_value');
              try {
                if(typeof(window.localStorage) != 'undefined') {
                  valoutput.value = window.localStorage.getItem(keyinput);
                }
                else {
                  throw "window.localStorage, not defined";
                }
              }
              catch(err) {
                output_str("store_local,error," + err);
              }
            }

            /* function to print to the debug area */

            function output_str(str){
                var da = document.getElementById("output_area");
                da.innerHTML += str + "<br/>";
                da.scrollTop = da.scrollHeight;
            }
            </script>
         </body>
    </html>

感谢您的回答。

Answer 1

function load()
            {
                var arr =new Array();

                var obj1 = document.getElementById("txt1").value;
                var obj2 = document.getElementById("txt2").value;
                var obj3 = document.getElementById("txt3").value;
                var obj4 = document.getElementById("txt4").value;
                var obj5 = document.getElementById("txt5").value;
                var obj6 = document.getElementById("txt6").value;
                var obj7 = document.getElementById("txt7").value;
                var obj8 = document.getElementById("txt8").value;

                arr.push(obj1);
                arr.push(obj2);
                arr.push(obj3);
                arr.push(obj4);
                arr.push(obj5);
                arr.push(obj6);
                arr.push(obj7);
                arr.push(obj8);

                var arrOrdered = _.sortBy(arr, function (item) {
                    return item; //you could implement your logic in here
                });
                iterate.over(arrOrdered);
            }

Answer 2

<html>
    <head>
        <title>Test</title>
    </head>
    <body>
        <input type="text" id="txt1" /><br/>
        <input type="text" id="txt2" /><br/>
        <input type="text" id="txt3" /><br/>
        <input type="text" id="txt4" /><br/>
        <input type="text" id="txt5" /><br/>
        <input type="text" id="txt6" /><br/>
        <input type="text" id="txt7" /><br/>
        <input type="text" id="txt8" /><br/>
        <input type="button" id="btn" value="Save" onclick="javascript: return save();"/>
        <div id="output"></div>
        <script type="text/javascript" src="http://underscorejs.org/underscore-min.js"></script>
        <script type="text/javascript">

            function save()
            {
                var arr =new Array();

                var obj1 = parseInt(document.getElementById("txt1").value);
                var obj2 = parseInt(document.getElementById("txt2").value);
                var obj3 = parseInt(document.getElementById("txt3").value);
                var obj4 = parseInt(document.getElementById("txt4").value);
                var obj5 = parseInt(document.getElementById("txt5").value);
                var obj6 = parseInt(document.getElementById("txt6").value);
                var obj7 = parseInt(document.getElementById("txt7").value);
                var obj8 = parseInt(document.getElementById("txt8").value);

                arr.push(obj1);
                arr.push(obj2);
                arr.push(obj3);
                arr.push(obj4);
                arr.push(obj5);
                arr.push(obj6);
                arr.push(obj7);
                arr.push(obj8);

                var arrOrdered = _.sortBy(arr, function (item) {
                    return item; //you could implement your logic in here
                });

                var html = "";

                _.each(arrOrdered, function(item){ html += item + "<br/>";});

                document.getElementById('output').innerHTML = html;
            }

        </script>
    </body>
</html>

如何使用html5本地存储加载值

2 个答案: