0

入力/テキストエリアで 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');
                    }
                }
            }
        }
    })();

私がこれまで取り組んできたのはデータのキャプチャですが、入力要素が間違った値を書き込んでいるため、どこかで間違っていると思います.どんな助けでも大歓迎です。

これまでのフォームの JSFiddle は次のとおりです。何か入力して数秒待ってから更新してください: http://jsfiddle.net/ZJZNf

4

1 に答える 1

0

localStorage文字列のみを格納します。(重すぎない) オブジェクトを格納する場合は、それらをシリアル化する必要があります。

たとえば、JSON を使用できます。

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

// read
var str = localStorage.getItem('formData');
if (str) formData = JSON.parse(str);
于 2013-03-13T17:09:13.697 に答える