2017-05-02 11 views
2

ページをリロードしても入力にデータを保存したいが、私のコードが機能しない理由を は知りません。これは私のhtmlファイルです:リロードページに値を保存するJavaScript

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
</head> 
<body> 
     <label>nom:</label> <input type="text" value=""/></br> 
     <label>prenom:</label><input type="text" value=""/> 
     <script type="text/javascript"> 
     window.onbeforeunload = function(){ 
     localStorage.setItem(nom, document.getElementsByTagName('input')[0].value); 
     localStorage.setItem(prenom, document.getElementsByTagName('input')[1].value); 
      } 
    document.addEventListener("DOMContentLoaded",function(){ 
      var nom = localStorage.getItem(nom); 
      var prnom = localStorage.getItem(prenom); 
      if(nom!==null&&prenom!==null) {     
      document.getElementsByTagName('input')[0].value = nom; 
      document.getElementsByTagName('input')[1].value = prenom; 
      } 
     }); 

     </script> 
</body> 
</html> 
+0

上では動作しませんので、あなたのコンピュータ上でコードを使用しますページがロードされたときには、テキストが設定されていないので、コードは保存されません。スニペットのコードを使用します。 –

答えて

1

変数名に引用符を使用してください:

localStorage.setItem('nom', document.getElementsByTagName('input')[0].value); 

それとも、単純である、この使用することができます:あなたのコードが設定された

localStorage.nom = document.getElementsByTagName('input')[0].value; 

をページがロードされたときのlocalStorageの値は、コードが保存されないようにテキストが設定されていないことを意味します。

次のコードを使用します

window.onbeforeunload = function() { 
 
    var nom = localStorage.nom; 
 
    var prnom = localStorage.prenom; 
 
    if (nom !== null && prenom !== null) { 
 
    document.getElementsByTagName('input')[0].value = nom; 
 
    document.getElementsByTagName('input')[1].value = prenom; 
 
    } 
 
};
<label>nom:</label> <input type="text" onchange="localStorage.nom = document.getElementsByTagName('input')[0].value" /></br> 
 
<label>prenom:</label><input type="text" onchange=" localStorage.prenom = document.getElementsByTagName('input')[1].value" />

重要:のlocalStorageはあなたのコードはのlocalStorage値を設定したスタックオーバーフロースニペット

+0

これを試してみてください。この解決策では問題は解決しません。/ –

+0

ページがロードされたときにコードがlocalStorageの値を設定していました。つまり、コードが保存されないようにテキストが設定されていません。スニペットのコードを使用します。 –

+0

thanx私は今試してみましたが、これは私の問題を修正しました。私は入力とリロードのデフォルト値を設定して、それはうまく動作します。 localStorage.nom = document.getElementsByTagName( 'input')[0] .value; –

関連する問題