javascript - ブラウザに依存せず、ブラウザで入力値を変更しない

Question

ユーザーが入力した値は<input/>、ページを更新した後も変更しないでおく必要があります。

ブラウザー間の互換性を維持するために、ブラウザーの依存関係を回避することが期待されています (たとえば、Cookie、localStorage はこれに対する解決策ではありません)。JavaScript、Jqueryも使用できますが、ブラウザ対応である必要があります。

Answer 1

これで始められるはずです。ページから移動せずに、URL の # 記号を使用して URL にテキストを追加できます。次に、ページをリロードするときに、URL からテキストを引き戻すことができます。

HTML および Javascript コード:

Type something in the box below and then refresh the page:<br>
<input type="text" id="myTextBox" onkeyup="saveValue();">

<script type="text/javascript">
    var originalLocation = document.location.href;
    var myTextBox = document.getElementById('myTextBox');

    function saveValue(){
        document.location.href = originalLocation + "#" + myTextBox.value;
    }

    if(document.location.href.indexOf("#") > -1){
        myTextBox.value = document.location.href.split("#")[1];
    }
</script>

Answer 2

これは、フォーム値のシリアル化と復元のためにこの基本的なプラグインに依存する localStorage (IE<=7 を除くすべてのブラウザーで利用可能) を使用した簡単なデモです。入力にいくつかの情報を入力した後、ページを更新してみてください。

HTML:

<form>
  <label for="name">Name:
    <input type="text" id="name" name="name" />
  </label>
  <br/>
  <label for="email">Email:
    <input type="text" id="email" name="email" />
  </label>
</form>

JS:

$(':input').on('input change keyup', function(){
  localStorage.formData = JSON.stringify($('form').values());
  console.log(localStorage.formData);
});
if(localStorage.formData){
  $('form').values(JSON.parse(localStorage.formData));
}