2016-07-27 1 views
0

私は現在学校プロジェクトを行っています。私はサーバー側のアプリケーションを刺激する必要があります。私はそれを "Local Storage"に置き換えていますが、私には問題があります。ユーザーが質問を提出すると、私は自分の "テキストボックス"スタック内にテキストを重ねることができます。リロードすると、データは引き続き表示されます。しかし、私は彼らがリロードした後に再びそれの上に積み重ねる方法を知らない。以下は私のテストコード私の提出の回答を重ね合わせ続けるにはどうすればいいですか

<!doctype html> 
<html> 
    <head> 



    <body onload="display()"> 

    <input type="text" id="Name"></input> 
    <input type="submit" id="submit" onclick="SavetoStorage()"></input> 


    <p id ="hoho"> 

    </p> 
    <script> 
     var name; 
     var groupOfName = ["Hello", "Chicken", "Pork","Beef"]; 
    function SavetoStorage() { 
     var name = document.getElementById("Name").value; 
     groupOfName[groupOfName.length] = name; 
     var newone = groupOfName; 
     document.getElementById("hoho").innerHTML = newone; 
     localStorage.groupOfName = newone; 

    } 


    function display() { 
     var groupOfName = localStorage.groupOfName; 
     document.getElementById("hoho").innerHTML = groupOfName; 
    } 







    </script> 
    </head> 
    </body> 


</html> 

答えて

0

はあなたが動的にそのようgroupOfName変数をロードする必要がある:

var tmp = localStorage.groupOfName; //this is a string 
var groupOfName = Array.from(tmp); //turn it into an array 

うまくいけば、これはあなたがSetItem関数を使用することができます右方向に

+0

私はそれをどのように適用するかわかりません!あなたはより多くの指示を提供してもらえますか?ありがとう –

0

あなたを指すように役立ちますlocalstorageのメソッド。 それは2つのパラメータ使用しています:上記のコードは、キー「名前」とそのキーを設定します

var inputValue = document.getElementById("Name").value; 
localStorage.setItem("name", inputValue); 

:ので、あなたがこのような何かを行うことができます

  • キーと値

をinputValueを保持します

これでgetItemという別のローカル記憶域メソッドを呼び出すことで値を取得できます:

var retrieveValue = localStorage.getItem("name"); 

上記のコードはアイテムを取得し、そのアイテムは何を保持していますか?あなたの望むようにあなたのhtmlにそれを加えることができます。

これは基本ですが、入力が1つしかないので、値が上書きされ、LocalStorageは配列をサポートしませんが、回避策として配列を使用することができます。

関連する問題