1

ユーザーが html5 を介して各ボックスに入力した値を保存する必要があります。ユーザーがページを更新するとき、各テキスト ボックスの値を保持する必要があります。これでうまくいくと友人に言われましたが、そうではなく、コンソールにエラーが表示されません。

<script>
function storageValue() {
    var uno = document.getElementById("storage1");
    var duck = uno.value
    var dos = document.getElementById("storage2");
    var duckie = dos.value
    var tres = document.getElementById("storage3");
    var rubberDuck = tres.value
    var quatro = document.getElementById("storage4");
    var rubberDuckie = quatro.value
    alert("Your stored values are: " + duck + "," + duckie + "," + rubberDuck + "," + rubberDuckie);
    localStorage.setItem('duck', duck);
    localStorage.setItem('duckie', duckie);
    localStorage.setItem('rubberDuck', rubberDuck);
    localStorage.setItem('rubberDuckie', rubberDuckie);
    checkLocalStorage();
}

function checkLocalStorage() {
    var poodle = document.getElementById('storage1').value
    poodle.innerHTML = localStorage["duck"] 
    var cow = document.getElementById('storage2').value
    poodle.innerHTML = localStorage["duckie"]
    var dog = document.getElementById('storage3').value
    dog.innerHTML = localStorage["rubberDuck"]
    var cat = document.getElementById('storage4').value
    cat.innerHTML = localStorage["rubberDuckie"];
}

checkLocalStorage();

私が持っているHTMLは次のとおりです。

<body align="center" style="background-color:red;">
    <div>
        <header>
            <h1>Local Storage</h1>
        </header>
        <input type="text" id="storage1" size="40" placeholder="Please enter a value">
        <input type="text" id="storage2" size="40" placeholder="Please enter a value">
        <input type="text" id="storage3" size="40" placeholder="Please enter a value">
        <input type="text" id="storage4" size="40" placeholder="Please enter a value">
        <br>
        <br>
        <input type="button" id="addValue" value="Store Input Values" onclick='storageValue();'>
        <div id="storageDiv"></div>
        <nav>
            <p>
                <a href="/">Home</a>
            </p>
            <p>
                <a href="/contact">Contact</a>
            </p>
        </nav>

        <div>

        </div>

        <footer>
            <p>
                &copy; Copyright  by Alan Sylvestre
            </p>
        </footer>
    </div>
</body>
4

4 に答える 4

2

ワーキング JS フィドル: http://jsfiddle.net/9BN5r/

問題は、入力フィールドの innerHTML を設定しようとしていることです。値を設定する必要があります。checkLocalStorage()関数を次のように変更します。

function checkLocalStorage() {
    var poodle = document.getElementById('storage1');
    poodle.value = localStorage['duck'];

    var cow = document.getElementById('storage2');
    cow.value = localStorage['duckie'];

    var dog = document.getElementById('storage3');
    dog.value = localStorage['rubberDuck'];

    var cat = document.getElementById('storage4');
    cat.value = localStorage['rubberDuckie'];
}
于 2013-05-26T06:37:28.100 に答える
0

以下はW3schoolsからの引用です

if(typeof(Storage)!=="undefined")
  {
  // Yes! localStorage and sessionStorage support!
  // Some code.....
  }
else
  {
  // Sorry! No web storage support..
  }

あなたの友人は正しいです。 localStorage はHTML5で動作するはずです。あなたのウェブサイトは HTML5 () で正しく動作していますか?

localStorage オブジェクトは、有効期限なしでデータを保存します。ブラウザーを閉じてもデータは削除されず、翌日、翌週、または翌年に利用可能になります。

エラーに関する詳細情報がなければ、これが私が本当にお勧めできるすべてです。

編集: コメントから、それは Chrome で動作していません - Chrome が最近更新されたのは確かですか?

于 2013-05-26T06:13:32.713 に答える
0 
        if(typeof(Storage) !== "undefined") {
        // working
    } else {
        // Not Support
    }
    Store Data

    //Syntax 
    localStorage.setItem(Key,Value);
    //By localStorage Object  Method

    localStorage.setItem('name','TEST');

    Retrieve Data
    var a = localStorage.getItem('name');
    alert(a); //Output : TEST


    Remove Data
    localStorage.removeItem('name');


    Remove All Data
    localStorage.clear();

テストデモ

于 2015-07-14T05:52:59.653 に答える
0

あなたのstorageValue機能は問題ないようですが、checkLocalStorage機能を修正する必要があります。

もう少し対称的なものが必要になります。

localStorage.setItem('duck', document.getElementById("storage1").value);
...
document.getElementById("storage1").value = localStorage.getItem('duck');

できれば、デフォルト値と値チェックなどを提供するためのコードを使用してください。

しかし、あなたのcheckLocalStorage機能には次のものがあります:

var poodle = document.getElementById('storage1').value
poodle.innerHTML = localStorage["duck"]

...意味がありません。

于 2013-05-26T06:32:35.617 に答える