web-dev-qa-db-ja.com

ローカルストレージを使用して入力値を保存およびロードしますか？

ユーザーが「保存」ボタンをクリックしたときにlocalStorage.setItem("input id", fieldvalue);のように、すべてのフォームフィールド値（入力IDの下）をローカルストレージ経由で保存しようとしています。その理由は、後日、ユーザーがすべてを再入力する代わりにフォームフィールド値を再読み込みするオプションがあるためです。問題は、入力IDと名前フィールドが不明であるため、ユーザーが前のページで選択した内容に応じて生成されるためです。 （彼らが選択するテンプレート）。

デモ（これが生成されたとしましょう）：

<input type="text" id="meta_title" name="seo_meta_title"> 
<input type="text" id="meta_description" name="seo_meta_description"> 
<input type="text" id="header" name="header"> 

<!-- Submit form-->
  <input type="submit" value="Create">

<!-- buttons-->
  <button onclick="save()">save</button>
  <button onclick="load()">load</button>

入力IDがわからないため、次のように書くことはできません。

function save() {
  if (typeof(Storage) != "undefined") {

    //some_code_to_insert_value = x, y, z 

    localStorage.setItem("meta_title", x);
    localStorage.setItem("meta_description", y);
    localStorage.setItem("header", z);
   }
}

そして、ロード機能についても同じことが言えます

// LOAD
function load() {
if (typeof(Storage) != "undefined") {
   // Adds data back into form fields 

   document.getElementById("meta_title").value = localStorage.getItem("meta_title");
   document.getElementById("meta_description").value = localStorage.getItem("meta_description");
   document.getElementById("header").value = localStorage.getItem("header");

    }
}

私はJavaScriptに非常に慣れていないので、ヘルプ、コード、またはリンクを教えていただければ幸いです。また、jsフィドルが機能することは驚くべきことではありません（入力IDを事前に知っていることに依存しない限り）など）私はこれを行うために数時間を費やし、これがひどい方法であると言われるまで、PHP inで必要なJSを生成しようとしてさらに多くの時間を無駄にしました。

javascriptphpjqueryhtmllocal-storage
5
Dan Fisher

JQueryに依存したい場合、これはあなたを助けることができます：

$('#save').on('click', function(){

    $('input[type="text"]').each(function(){    
        var id = $(this).attr('id');
        var value = $(this).val();
       localStorage.setItem(id, value);

    });   
});

$('#load').on('click', function(){
    $('input[type="text"]').each(function(){    
        var id = $(this).attr('id');
        var value = localStorage.getItem(id);

        $(this).val(value);

    }); 
});

Inline-jsを避けることをお勧めするので、2つのボタンにclick-handlerをアタッチするために 。on（） を使用するようにコードを更新しました。

デモ

参照：

。each（）

18
empiric
   Replace Html Code And Script File 
   <form method='post' id='myform'>
    <input type="text" id="meta_title" name="seo_meta_title"> 
    <input type="text" id="meta_description" name="seo_meta_description"> 
    <input type="text" id="header" name="header"> 

    <!-- Submit form-->
      <input type="submit" id="save" value="Create">

    <!-- buttons-->
      <button onclick="save()">save</button>
      <button onclick="load()">load</button>
    </form>
    <script>
    $('#save').on('click', function(){
       var post_vars = $('#myform').serializeArray();
       localStorage.setItem(id, post_vars);
    });
    </script>
0
Rocky Kumar