ユーザーデータを永続的に保存する方法

現在、私は学校のプロジェクトを行っていますが、私は最初からフォーラムを作成しています。私は「Add Section」ボタンを作成しようとしていました。このボタンをクリックすると新しい質問ボックスが作成されました。しかし、私はそれをどうやってやるべきかについてはわかりません。ユーザーデータを永続的に保存する方法

私がこれまで達成してきたことは、ユーザーが私に向かって渡すデータを利用することですが、ユーザーがリフレッシュした後でもコードにとどまることはありません。それはローカルストレージの制限ですか？それがあれば、私が使うことのできる何か他の選択肢ですか？私のコードの私のコードの

ページ1

<!doctype html> 
<html> 
    <head> 
    <link rel="stylesheet" type="text/css" href="Testing.css"> 
    <script> 
    function addNew(){ 
    var datatwo = localStorage.datatwo; 
    var newData = document.createTextNode(datatwo); 
    var hello = document.createElement("th"); 
    hello.appendChild(newData); 
    document.getElementById("Questions").appendChild(hello); 
} 
    </script> 
    </head> 

    <body> 
    <div id="Addnew"> 
     <button onclick="addNew()" id ="AddNewButton">Add new </button> 
    </div> 
    <h1>This is Page 1 </h1> 
    <table> 
     <tr id="Questions"> 
     <th>What is my Name</th> 
     <th>What is his name</th> 

     </tr> 

     <tr> 
     <td>Justin</td> 
     <td>James</td> 
     </tr> 
    </table> 
     <nav> 
      <div id="footerPages"> 

        <ul> 
         <li><p>Page 1 of 3</p></li> 
         <li><a href=""> < Prev </a></li> 
         <li><a href="#"> 1 </a></li> 
         <li><a href="Testing2.html"> 2 </a></li> 

         <li><a href="#"> 3 </a></li> 
         <li><a href="#"> 4 </a></li> 
         <li><a href="#"> 5 </a></li> 
         <li><a href="#"> 6 </a></li> 
         <li><a href="#"> 7 </a></li> 
          <li><a href="Testing2.html"> Next ></a></li> 
       </ul> 
      </div> 
      </nav> 




    </body> 

</html>

ページ2

<!doctype html> 
<html> 
    <head> 
    <link rel="stylesheet" type="text/css" href="Testing.css"> 
    <script> 
    function addNew(){ 
    var data = prompt("What is your question?"); 
    localStorage.datatwo = data; 

    } 
    </script> 
    </head> 

    <body> 
    <div id="Addnew"> 
     <button onclick="addNew()" id ="AddNewButton">Add new </button> 
    </div> 
    <h1>HI THIS IS PAGE 2</h1> 
    <table> 
     <tr id="Questions"> 
     <th>What is my Name</th> 
     <th>What is his name</th> 

     </tr> 

     <tr> 
     <td>Justin</td> 
     <td>James</td> 
     </tr> 
    </table> 
     <nav> 
      <div id="footerPages"> 

        <ul> 
         <li><p>Page 1 of 3</p></li> 
         <li><a href="Testing.html"> < Prev </a></li> 
         <li><a href="Testing.html"> 1 </a></li> 
         <li><a href="#"> 2 </a></li> 
         <li><a href="#"> 3 </a></li> 
          <li><a href="#"> Next ></a></li> 
       </ul> 
      </div> 
      </nav> 




    </body> 

</html>

出典

2016-07-17 Justin Soh

あなたの2ページのコードが同じであるように見える –

また、あなたのプロジェクトにCMSのような準備ができているフォーラムを採用（選択）できます。（PHP BB） –

それはあなただけのいくつかのプロパティを設定しているので、

localStorage.setItem(key, value); 
localStorage.getItem(key, value);

あなたのコードは永続的ではないのですオブジェクト。あなたは私はあなたのプロジェクトに（Javascriptフレームワークなし）プレーンなJavaScriptを使用してのためにあなたを責めないだので、あなたは現在、学校のプロジェクトをやっていると述べたよう

出典

2016-07-17 07:29:09

。しかし、jQueryを使って簡単にすることができます。

LocalStorageは、データをローカルに（永続的に）保存するために使用されます。 SessionStorageは、セッション/タブごとのデータを格納するために使用されます。

は、私はあなたが、これはこのコードを使用してこの

<table> 
    <tr id="Questions"> 
    <th>What is my Name</th> 
    <th>What is his name</th> 

    </tr> 

    <tr id="myNewQuestion"> 
    <td>Justin</td> 
    <td>James</td> 
    </tr> 
</table>

を使用して、テーブルを

<script> 
    function addNew(){ 
    var questionHead = document.createTextNode("Your Question"); 

    var queHeadElement = document.createElement("th"); 
    queHeadElement.appendChild(questionHead); 
    document.getElementById("Questions").appendChild(queHeadElement); 

    var datatwo = localStorage.datatwo; 
    var newQuestionText = document.createTextNode(datatwo); 
    var newQuestionTextElement = document.createElement("td"); 
    newQuestionTextElement.appendChild(newQuestionText); 
    document.getElementById("myNewQuestion").appendChild(newQuestionTextElement); 
} 
    </script>

としてスクリプトタグを変更し、変更を行うためにページ1に格納されたデータを更新したいと思いますが、最新のデータlocalStorageから、ボタンクリックでテーブルに表示されます。

上記のコードは正常に動作します。しかし、私はここでもう一つ言いたいことがあります。

<li><a href=""> < Prev </a></li>

あなたは<前のブラウザのような記号少ないし、その後以上を使用したい場合は前がhtml要素であるかのように扱います。ブラウザは、終了タグが<の前に/ >または<になるように試みます。前の> < /前の>です。上記のコードはここで動作していますが、このように記述するべきではありません。あなたはいつも私はこの答えは、あなたのプロジェクトであなたを助けることを願っています>

<li><a href=""> &gt; Prev </a></li>

ため<シンボルと>ため<を使用する必要があります。あなたのプロジェクトに最高の運があります。

出典

2016-07-17 07:40:39

ユーザーデータを永続的に保存する方法

答えて

関連する問題