在Rails 5中刷新時緩存未保存的表單數據的最佳方法

Question

我有一個巨大的多重嵌套表格，需要一段時間才能填寫。 如果用戶錯誤地刷新頁面或返回頁面，我正在尋找一種緩存其表單數據的方法。 當他們刷新頁面並不得不重新填寫整個表格時，這將成為一個主要的痛苦。 有沒有一種方法可以在保存之前保留這些數據？

<%= simple_form_for(round, url: decide_action) do |f| %>
    <div class="block-content block-content-sm">
      <div class="progress" data-wizard="progress" style="height: 8px;">
        <div class="progress-bar progress-bar-striped progress-bar-animated bg-primary" role="progressbar" style="width: 34.3333%;" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
      </div>
    </div>
    <div class="block-content block-content-full tab-content" style="min-height: 300px;">
      <div class="tab-pane active show" id="wizard-progress-step1" role="tabpanel">
        <% if @company.equity_pool %>
          <div class="row no-gutters">
            <%= link_to get_revise_form_company_equity_pool_path(@company, @company.equity_pool), remote: true, class: "btn btn-hero-sm btn-square btn-hero-primary", data: {toggle:  "modal", target: '#modal' } do %>
              Revise Form
            <% end %>
          </div>
        <% end %>
        <div class="row no-gutters">
          <div class="col mr-3">
            <%= f.input :name, input_html: {data: {email: "#{current_user.email}"}} %>
          </div>
          <div class="col">
            <%= f.input :pre_money_valuation, as: :string, input_html: { value: 0, data: {autonumeric: {mDec: 2}, fdsc_shares: @company.total_fdsc, investment: ''} }, label: 'Pre money valuation' %>
          </div>
        </div>

        <div class="row no-gutters">
          <div class="col mr-3">
            <%= f.input :issue_price, as: :string, input_html: {min: 0, max: 1000, data: { autonumeric: {mDec: 5}}} %>
          </div>
          <div class="col">
            <%= f.input :conversion_ratio, as: :string, input_html: {min: 0, max: 10000, data: { autonumeric: {mDec: 3 }}} %>
          </div>
          <div class="col">
            <%= f.input :conversion_price, as: :string, input_html: { data: {autonumeric: {mDec: 5}} } %>
          </div>
        </div>
        <div class="row no-gutters">
          <div class="col-12">
            <div class="form-group">
              <div class="custom-control custom-switch custom-control-primary custom-control-lg mb-2">
                <%= f.check_box :anti_dilution, class: 'custom-control-input', id: 'example-sw-custom-primary-lg2' %>
                <label class="custom-control-label" for="example-sw-custom-primary-lg2">Anti Dilution</label>
              </div>
            </div>
          </div>
          <div class="col" id="anti-dilution-fields">
            <%= f.input :dilution_type, collection: Round.dilution_types.keys, include_blank: false, input_html: { id: "dilution-type", style: 'height: 36px;' } %>
          </div>
        </div>

      </div>
      <div class="tab-pane" id="wizard-progress-step2" role="tabpanel", data-company="<%=@company.id %>">
        <%= f.simple_fields_for :certificates, validate: true do |t| %>
          <%= render 'certificate_fields', f:t %>
        <% end %>
        <div class="links">
          <%= link_to_add_association 'Add Investors', f, :certificates, class: 'btn btn-hero-primary btn-block mt-3', id: "addFounder" %>
        </div>
      </div>
      <% if @company.pending_cns.count > 0 %>
        <div class="tab-pane" id="wizard-progress-step3" role="tabpanel">
          <div class="alert alert-primary d-flex align-items-center mb-3" role="alert">
            <div class="flex-00-auto">
              <i class="fa fa-fw fa-check"></i>
            </div>
            <div class="flex-fill ml-3">
              <p class="mb-0">Please tick all the convertible notes you want to convert in this round!</p>
            </div>
          </div>
          <table class="js-table-checkable table table-hover table-vcenter js-table-checkable-enabled mb-5">
            <thead class="thead-light">
              <tr>
                <th class="text-center" style="width: 70px;">
                  <div class="custom-control custom-checkbox custom-control-primary d-inline-block">
                    <input class="custom-control-input" id="check-all" name="check-all" type="checkbox">
                    <label class="custom-control-label" for="check-all"></label>
                  </div>
                </th>
                <th class="text-center" style="width: 100px;">#</th>
                <th class="text-center">Convertible Note Holder</th>
                <th class="text-center">Status</th>
                <th class="text-center">Principal</th>
                <th class="text-center">Interest Rate</th>
                <th class="text-center">Interest Start</th>
                <th class="text-center">Interest Accrued</th>
                <th class="text-center">Total Amount</th>
              </tr>
            </thead>
            <tbody>
              <% @company.pending_cns.each_with_index do |convertible_note, i| %>
                <tr>
                  <td class="text-center">
                    <div class="custom-control custom-checkbox custom-control-primary d-inline-block">
                      <input class="custom-control-input" id="row_<%=i%>" name="conv_notes[<%= i%>]" value="<%= convertible_note.id %>" type="checkbox">
                      <label class="custom-control-label" for="row_<%=i%>"></label>
                    </div>
                  </td>
                  <th class="text-center" scope="row"><%= convertible_note.security %></th>
                    <td class="font-w600 text-center">
                      <a class="text-info push" href="#" data-toggle="modal" data-id= "<%= convertible_note.id %>" data-target="#modal-first"><%= convertible_note.name %></a>
                    </td>
                    <td class="text-center">
                      Outstanding
                    </td>
                    <td class="text-center">
                      <%= number_to_currency(convertible_note.principal) || "No quantity" %>
                    </td>
                    <td class="text-center">
                      <%= convertible_note.convertible_term.interest_rate %>
                    </td>
                    <td class="text-center">
                      <%= convertible_note.issue_date || "No issue date" %>
                    </td>
                    <td class="text-center">
                      <% interest = convertible_note.interest_calculator(convertible_note.principal, convertible_note.issue_date, convertible_note.convertible_term.interest_rate, convertible_note.convertible_term.interest_period, Date.today) %>
                      <%= number_to_currency(interest) || "No Interest" %>
                    </td>
                    <td class="text-center">
                      <%= number_to_currency(convertible_note.principal + interest)%>
                    </td>
                </tr>
              <% end %>
            </tbody>
        </table>
        </div>
      <% end %>
      <% if @company.pending_warrants.count > 0 %>
        <div class="tab-pane" id="wizard-progress-step4" role="tabpanel">
          <table class="js-table-checkable table table-hover table-vcenter js-table-checkable-enabled mb-5">
            <thead class="thead-light">
              <tr>
                <th class="text-center" style="width: 70px;">
                  <div class="custom-control custom-checkbox custom-control-primary d-inline-block">
                    <input class="custom-control-input" id="check-all" name="check-all" type="checkbox">
                    <label class="custom-control-label" for="check-all"></label>
                  </div>
                </th>
                <th class="text-center" style="width: 50px;">#</th>
                <th class="text-center">Warrant Holder</th>
                <th class="text-center">Quantity</th>
                <th class="text-center">Exercise Price</th>
                <th class="text-center">Issue date</th>
                <th class="text-center">Expiration date</th>
              </tr>
            </thead>
            <tbody>
              <% @company.pending_warrants.each_with_index do |warrant, i| %>
                <tr>
                  <td class="text-center">
                    <div class="custom-control custom-checkbox custom-control-primary d-inline-block">
                      <input class="custom-control-input" id="row_<%=i%>" name="warrants[<%= i%>]" value="<%= warrant.id %>" type="checkbox">
                      <label class="custom-control-label" for="row_<%=i%>"></label>
                    </div>
                  </td>
                  <th class="text-center" scope="row"><%= warrant.security %></th>
                  <td class="font-w600 text-center">
                    <a class="text-info push" data-toggle="modal" data-target="#modal-<%= warrant.id %>"><%= warrant.name %></a>
                  </td>
                  <td class="text-center">
                    <%= warrant.quantity || "No quantity" %>
                  </td>
                  <td class="text-center">
                    <%= warrant.warrant_block.exercise_price %>
                  </td>
                  <td class="text-center">
                    <%= warrant.issue_date || "Not entered" %>
                  </td>
                  <td class="text-center">
                    <%= warrant.expiration_date || "Not entered" %>
                  </td>
                </tr>
              <% end %>
            </tbody>
          </table>
        </div>
      <% end %>
      <div class="block-content block-content-sm block-content-full bg-body-light rounded-bottom " style="margin: -20px;margin-top: 75px;width: calc(100% + 40px);">
        <div class="row">
          <div class="col-6">
            <button type="button" class="btn btn-secondary disabled" data-wizard="prev">
              <i class="fa fa-angle-left mr-1"></i> Previous
            </button>
          </div>
          <div class="col-6 text-right">
            <button type="button" class="btn btn-secondary" data-wizard="next">
              Next <i class="fa fa-angle-right ml-1"></i>
            </button>
            <%= f.submit :submit, class: "btn btn-primary d-none", data: {wizard: "finish"}, value: "Create Round"%>
          </div>
        </div>
      </div>
    </div>
  <% end %>

Answer 1

我認為您最好更改用戶界面，並讓用戶每次以小表格逐步提交。 准備不同的頁面，每個頁面都有少量表格。 根據用戶到達的距離，應將他們重定向到具有適當形式的頁面以繼續。

Answer 2

正如@Nate的注釋中所建議的那樣，最好將表單的當前狀態存儲在localStorage中。 例如，在每個表單域焦點上，您都可以從代碼片段https://gist.github.com/shawnbot/89855705204494c6d8bf中運行代碼。

另外，您可以使用一個名為jquery.remember-state的自定義jQuery庫： http ://shaneriley.com/jquery/remember_state/

兩種方法都可以解決您的問題。