HTML5中的本地存儲形式

Question

我正在嘗試將數字存儲到具有購物車類型的網站的本地存儲中...我發現了一些示例，在這些示例中可以存儲文本/電子郵件，但是當我嘗試將其存儲為數字而不是文本或更改表格名稱時，似乎沒有用。

這是我在網站上制作的用於捕獲數據的表格，其次是javascript，它應填充來自另一個會話的已保存數據，捕獲數據和（當前在提交時重置）數據。

<form id="localStorageCart" method="post" action="">
  <label>Rooster:</label>
  <input type="number" name="roosterQ" id="roosterQ" class="stored" min="0" max="99" step="1" value ="0" /><br>


  <label>Cow:</label>
  <input type="number" name="cowQ" id="cowQ" class="stored" min="0" max="99" step="1" value ="0" /><br>


  <label>Cat:</label>
  <input type="number" name="catQ" id="catQ" class="stored" min="0" max="99" step="1" value ="0" /><br>


  <label>Sheep:</label>
  <input type="number" name="sheepQ" id="sheepQ" class="stored" min="0" max="99" step="1" value ="0" /><br>


  <label>Dumpster:</label>
  <input type="number" name="dumpsterQ" id="dumpsterQ" class="stored" min="0" max="99" step="1" value ="0" /><br>


  <label>Dog:</label>
  <input type="number" name="dogQ" id="dogQ" class="stored" min="0" max="99" step="1" value ="0" /><br>


  <label>Horse:</label>
  <input type="number" name="horseQ" id="horseQ" class="stored" min="0" max="99" step="1" value ="0" /><br>



    <input type="submit" class="submitOrder" value="Submit" />
</form><br>
<br>

<script type="text/javascript">
$(document).ready(function () {
    function init() { /* checks for stored data and fills in... */
        if (localStorage["roosterQ"]) {
            $('#roosterQ').val(localStorage["roosterQ"]);
        }
        if (localStorage["cowQ"]) {
            $('#cowQ').val(localStorage["cowQ"]);
        }
        if (localStorage["catQ"]) {
            $('#catQ').val(localStorage["catQ"]);
        }
         if (localStorage["sheepQ"]) {
            $('#sheepQ').val(localStorage["sheepQ"]);
        }
         if (localStorage["dumpsterQ"]) {
            $('#dumpsterQ').val(localStorage["dumpsterQ"]);
        }
         if (localStorage["dogQ"]) {
            $('#dogQ').val(localStorage["dogQ"]);
        }
         if (localStorage["horseQ"]) {
            $('#horseQ').val(localStorage["horseQ"]);
        }
    }
    init();
});

$('.stored').keyup(function () { /* keyup runs when key is pressed in a form with "stored"... Write to LS */
    localStorage[$(this).attr('name')] = $(this).val();
});

$('#localStorageCart').submit(function() { /* currently resets all LS data*/
    localStorage.clear();
});
</script>

Answer 1

localStorage只能保存字符串，因此，如果要存儲數字，則需要鍵入convert

var num = 1.5, str;

// Number to string, would be done implicitly by localStorage
str = num.toString();

// String to number
num = +str; // note nothing infront of the + sign.
// OR
// num = window.parseFloat(str,10); // or parseInt if you want integers

console.log(num, str);
// 1.5 "1.5"

---

或更改似乎不起作用的表單名稱

您是否也在更新init ？ 為了避免以后再執行此操作，它應該循環.stored而不是通過id單獨獲取每個。

Answer 2

如果您仍然想通過localstorage進行操作，則可能需要在存儲變量之前檢查json.stringify

var obj = { 'a': 1, 'b': 2, 'c': 3 };
localStorage.setItem('obj', JSON.stringify(obj));

---

無論如何，您打算做什么？ 您是否只是想保留該字段以供下次使用或重新加載頁面？

如果是這樣，您可能要嘗試使用此插件Sisyphus http://simsalabim.github.com/sisyphus/