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));

---

你到底打算做什么？您是否只是想保留该字段以供下次使用或重新加载页面？

如果是这样，你可能想试试这个插件，西西弗斯 http://simsalabim.github.com/sisyphus/