在联系表单上使用HTML5 localStorage，表单元素中的值不正确

Question

我正在创建一个非常基本的表单，我需要在输入/文本区域上使用HTML5 localStorage。

这是HTML：

<div id="local-storage">
    <input name="name" type="text" placeholder="Name:">
    <input name="website" type="url" placeholder="Website:">
    <textarea name="message" placeholder="Message:"></textarea>
</div>

到目前为止，我拥有的脚本是：

(function () {
        var localStorageID = document.getElementById('local-storage');
        var inputTags = ['input', 'textarea', 'select', 'button'];

        for (var i = 0; i < inputTags.length; i++) {

            var localStorageTag = localStorageID.getElementsByTagName(inputTags[i]);
            var formData = {};
            for (var z = 0; z < localStorageTag.length; z++) {
                formData[localStorageTag[z].name] = localStorageTag[z].value;
            }
            localStorage.setItem('formData', formData);
            if (localStorage.getItem('formData')) {

            }

            for (var z = 0; z < localStorageTag.length; z++) {
                var currentLocalTag = localStorageTag[z];
                currentLocalTag.className += 'test';
                setInterval(function () {
                    localStorage.setItem('autosave', currentLocalTag.value);
                }, 1000);

                if (localStorage.getItem('autosave')) {
                    for (var i = 0; i < localStorageTag.length; i++) {
                        var currentLocalTags = localStorageTag[i];
                        currentLocalTags.value = localStorage.getItem('autosave');
                    }
                }
            }
        }
    })();

到目前为止，我的工作是捕获数据，但是我认为我在某些地方出错了，因为输入元素正在向其中写入错误的值。我对JavaScript相当陌生，因此这对我来说是一个巨大的学习曲线非常感谢您的帮助。

到目前为止，这是表单的JSFiddle，输入一些内容并等待几秒钟然后刷新： http : //jsfiddle.net/ZJZNf

Answer 1

localStorage仅存储字符串。 如果要存储（不太重）对象，则必须序列化它们。

例如，您可以使用JSON：

// store
localStorage.setItem('formData', JSON.stringify(formData));

// read
var str = localStorage.getItem('formData');
if (str) formData = JSON.parse(str);