通过Javascript将值存储在localStorage中

Question

我的目标是使用一个函数存储通过某种命名形式提交的数据，并使用另一个函数检索数据。 该表单包含几个输入标签和两个选择标签。 这是JS代码：

function storage() {
    if (typeof(Storage) != "undefined") {
        var elements = document.getElementsByTagName('input');
        for (var input in elements) {
            input.value = localStorage.getItem(input.name);
        }
        var elements = document.getElementsByTagName('select')
        for (var select in elements) {
            select.value = localStorage[select.name];
    }

    }
    alert("Success?");
}

function onSubmit() {
    inputs = document.forms["forsendur"].getElementsByTagName("input");
    selects = document.forms["forsendur"].getElementsByTagName("select");
    for (var i=0; i<inputs.length; i++) {
        localStorage.setItem(inputs[i].name, inputs[i].value);
    }
    alert("Success?");
}

这是调用storage（）函数的单独的输入标签：

    <input type="button" class="button2" value="Last session" onClick="storage();">

这是（部分省略）的形式：

<form action="cool_url" name="forsendur" method="post"> 
    <lots of input and select tags>
    <input class="button2" type="submit" value="Reikna" onClick="onSubmit();"/>
</form>

但是，没有任何反应（我可以确认通过表单正确发送了数据）。 我包括了两个alert()调用，它们被触发，因此函数被调用并执行。

Answer 1

您的存储功能中的for循环存在问题。 您可以通过重写它来使其与onSubmit函数中的一个匹配来修复它：

function storage() {
  if (typeof(Storage) != "undefined") {

    var elements = document.getElementsByTagName('input');
    for (var i=0; i<elements.length; i++) {
        elements[i].value = localStorage.getItem(elements[i].name);
    }

    var elements = document.getElementsByTagName('select')
    for (var i=0; i<elements.length; i++) {
      elements[i].value = localStorage[elements[i].name];
    }
  }
}

Answer 2

好吧，由于您使用的是jquery标记，因此我将在下面实现的示例中使用它，该示例遵循您尝试解析的相同“情况” ，但从其他方面来讲，希望它会有所帮助，因为它将减少您的代码行数。

现场演示： http : //jsfiddle.net/oscarj24/3Pa6Z/

---

HTML： 我添加了一个input然后select遵循您在问题中所写的内容。 您可以有很多，不要忘记为每个元素添加一个name属性。

<form action="/echo/json/" name="form" method="post">
    <!-- Test input/select -->
    Name: <input type="text" name="name" value="Oscar" /><br>
    Gender:
    <select name="gender">
        <option value="M">Male</option>
        <option value="F">Female</option>
    </select><br>
    <!-- Test input/select -->
    <input class="btn" type="submit" value="Send" />
</form>

jQuery： 请阅读评论！

// Document ready handler
$(function() {
    // Get form
    var frm = $('form');

    // Form submit handler
    frm.on('submit', function() {
        // Get all form elements as javascript object
        var frmData = frm.serializeArray();

        // Check if object is not empty and if local storage
        // is available to store form data using their names and values
        if(!$.isEmptyObject(frmData) && hasStorage()) {
            for(var i = 0; i < frmData.length; ++i) {
                var elem = frmData[i];
                localStorage.setItem(elem.name, elem.value);
            }
        }
    });

    //TODO: Remove after testing
    if(hasStorage()) {
        // Print stored values, at first time 'Name' and 'Gender' will be 'null'
        console.log('Name: ' + localStorage.getItem('name'));
        console.log('Gender: ' + localStorage.getItem('gender'));

        // Remove all stored values
        localStorage.clear();
    }
});

// Used to check if localStorage feature is supported
function hasStorage() {
    return (typeof(Storage) !== 'undefined');
}