Question

     <!DOCTYPE HTML>
        <html>
         <head>
          <title>HTML5 localStorage (name/value item pairs) demo</title>
          <style >
            td, th {
              font-family: monospace;
              padding: 4px;
              background-color: #ccc;
            }
            #hoge {
              border: 1px dotted blue;
              padding: 6px;
              background-color: #ccc;
              margin-right: 50%;
            }
            #items_table {
              border: 1px dotted blue;
              padding: 6px;
              margin-top: 12px;
              margin-right: 50%;
            }
            #items_table h2 {
              font-size: 18px;
              margin-top: 0px;
              font-family: sans-serif;
            }
            label {
              vertical-align: top;
            }
          </style>
         </head>
         <body onload="doShowAll()">
          <h1>HTML5 localStorage (name/value item pairs) demo</h1>

          <form name=editor>

            <div id="hoge">
             <p>
             <label>Value: <textarea name=data cols=41 rows=10></textarea></label>
             </p>

             <p>
              <label>Name: <input name=name></label>
              <input type=button value="getItem()" onclick="doGetItem()">
              <input type=button value="setItem()" onclick="doSetItem()">
              <input type=button value="removeItem()" onclick="doRemoveItem()">
             </p>
           </div>

           <div id="items_table">
             <h2>Items</h2>
             <table id=pairs></table>
             <p>
             <label><input type=button value="clear()" onclick="doClear()"> <i>* clear() removes all items</i></label>
             </p>
           </div>


           <script>



function doSetItem() {
    var name = document.forms.editor.name.value;
    var data = document.forms.editor.data.value;
    var origData = localStorage.getItem(name) || 0;
    localStorage.setItem(name, parseInt(origData) + parseInt(data));
    doShowAll();
}



             function doGetItem() {
               var name = document.forms.editor.name.value;
               document.forms.editor.data.value = localStorage.getItem(name);
               doShowAll();
             }

             function doRemoveItem() {
               var name = document.forms.editor.name.value;
               document.forms.editor.data.value = localStorage.removeItem(name);
               doShowAll();
             }

             function doClear() {
               localStorage.clear();
               doShowAll();
             }

             function doShowAll() {
               var key = "";
               var pairs = "<tr><th>Name</th><th>Value</th></tr>\n";
               var i=0;
               for (i=0; i<=localStorage.length-1; i++) {
                 key = localStorage.key(i);
                 pairs += "<tr><td>"+key+"</td>\n<td>"+localStorage.getItem(key)+"</td></tr>\n";
               }
               if (pairs == "<tr><th>Name</th><th>Value</th></tr>\n") {
                 pairs += "<tr><td><i>empty</i></td>\n<td><i>empty</i></td></tr>\n";
               }
               document.getElementById('pairs').innerHTML = pairs;
             }

           </script>

          </form>

         </body>
        </html>

朋友们，我想本地保存数据，现在我能够通过代码在本地保存数据。如果我给出相同的名称，则值将被添加并保存在本地。但名称应按高值到低的顺序显示（例如：Ram 20，Renu 18，green 2就像明智......）。那么怎么做？

Answer 1

对于我在代码中看到的内容，您只是替换了值，您需要首先从localStorage获取现有值，然后将其附加到新的值，然后将结果指向localStorage。

Answer 2

function doSetItem() {
    var name = document.forms.editor.name.value;
    var data = document.forms.editor.data.value;
    var origData = localStorage.getItem(name) || 0;
    localStorage.setItem(name, parseInt(origData) + parseInt(data));
    doShowAll();
}

按降序显示：

function doShowAll() {
    var key = "";
    var pairs = "<tr><th>Name</th><th>Value</th></tr>\n";
    var userArray = [];
    for (var i = 0; i <= localStorage.length - 1; i++) {
        key = localStorage.key(i);
        userArray.push({name:key, value:parseInt(localStorage.getItem(key))});
    }
    userArray.sort(function(a, b){
        return b.value - a.value;
    });
    userArray.forEach(function(user){
        pairs += "<tr><td>" + user.name + "</td>\n<td>" + user.value + "</td></tr>\n";
    });
    if (pairs === "<tr><th>Name</th><th>Value</th></tr>\n") {
        pairs += "<tr><td><i>empty</i></td>\n<td><i>empty</i></td></tr>\n";
    }
    document.getElementById('pairs').innerHTML = pairs;
}

如何在本地添加数据并通过其id添加值？

2 个答案: