localStorageを使用してフォームデータを格納する

ページにフォームを記入する場合、ページがジャンプしたりリフレッシュしたりしたときに、前に記入したデータを保持することが望ましいことがよくあります.H 5のWeb Storage APIは、クライアントに記入されたフォームデータを格納するのに役立ちます.以下、一例を用いて用法を説明する.
HTMLコード

JAvascriptコード

//      jquery

  
    //       
    $("#formSave").click(function () {
      //          
      localStorage.setItem("name", $("#name").val());
      localStorage.setItem("phone", $("#phone").val());
      localStorage.setItem("province", $("#province").val());
      //     radio
      var k_val = $(":radio[name=sex]:checked").val();
      localStorage.setItem("k_val", k_val);
    })
    //       
    $(
      function myStorage() {
        //               
        var name = localStorage.getItem("name");
        var phone = localStorage.getItem("phone");
        var province = localStorage.getItem("province");
        //               
        $("#name").val(name);
        $("#phone").val(phone);
        $("#province").val(province);
        //       radio
        $(":radio").removeAttr("checked");//     
        var kk_val = localStorage.getItem("k_val");; 
        $(':radio').each(function () {
          if ($(this).val() == kk_val) {
            $(this).prop("checked", true);
          }
        })
      }
    )
    myStorage();
  

ここでは主にlocalStorageが使われています.setItem()とlocalStorage.getItem()は、格納する値を設定し、格納した値を取得するために使用されます.