Question

我正在创建一个非常基本的表单，我需要在输入/ textarea上使用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);

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

1 个答案: