すべての兄弟を動的ローカルストレージアレイに格納する方法は？

Question

私は2つのファイルがある - first.html & second.html

• first.html - ここでは、ユーザが入力されますいくつかのフィールド：名前、組織、JobTitle、...
• second.html - これをTEXTAREAフィールドを使用してユーザーが入力した出力は、フィールド

Purposer意志：（1）動的アレイ内の特定のスパン（ID =「spanBox」）のすべての兄弟を記憶するために私の目的であります（2）配列内のテキスト領域フィールドを使用して配列のすべての要素を出力するsecond.html

説明：「ダイナミックにすべての兄弟をストアする」という意味は、配列内に明示しておきます。次の数行では、配列に格納されるフィールドのほんの一部について述べます。動的には、各フィールドを名前で手動で保存する必要はなく、ボタンを押した後にonClickイベントが発生したときに、すべての兄弟を動的に格納するsendtoLastPage（）を呼び出します配列内にあります。

First.html：

function sendtoLastPage(){ 
 
    //How do I dynamically store all the siblings of id=spanBox to an array? 
 
    window.location="second.html"; //Send users to the next page 
 
}

<span class="box" id="spanBox"> 
 
    Name<BR><input name="Name" id="Name" type="text" size=40> 
 
    Organization<BR><input name="Organization" id="Organization" type="text" size=40> 
 
    Job Title<BR><input name="JobTitle" id="JobTitle" type="text" size=40> 
 
    <button value="btn" onClick="sendtoLastPage();">Go to Next Page</button> 
 
</span>

注：私はJavaScriptのソリューション（ないjQueryの）を探しています。

この問題を読む時間を割いてくれてありがとう。私は本当に他のスレッドの解決策を探してみましたが、同様の質問は見つかりませんでした。

Answer 1

あなたはおそらく、あなたの「次のページへ」ボタンに次のコールバックをバインドすることができます：

function handleSubmit(evt) {  
    var spanBox = document.querySelector('#spanBox'); 
    var inputs = spanBox.querySelectorAll('input'); 
    var data = {}; 

    inputs.forEach(function(input) { 
    data[input.name] = input.value; 
    }); 

    localStorage.setItem('savedData', JSON.stringify(data)); 
} 

これはlocalStorageへの入力を保存するとsecond.htmlファイルに、あなたが使用してlocalStorageデータにアクセスすることができますsavedDataキー。

それはのようなものに見えるだろう：

var textArea = document.querySelect('textarea'); 
var savedData = JSON.parse(localStorage.getItem('savedData')); 

textArea.value = savedData;