Question

＆＃34; ajax＆＃34;在脚本中向服务器发送帖子或删除消息。包含ajax的javascript是添加复选框的内容。我们如何才能使创建的复选框元素保持不变，以便当用户刷新页面时它们仍然存在？

enter image description here

习惯/ _form.html.erb

<label id="<%= @habit.id %>" class="habit-id"> Missed: </label>
<% @habit.levels.each_with_index do |level, index| %>
  <% if @habit.current_level >= (index + 1) %>
    <p>
      <label id="<%= level.id %>" class="level-id"> Level <%= index + 1 %>: </label>
      <%= check_box_tag nil, true, level.missed_days > 0, {class: "habit-check"} %>
      <%= check_box_tag nil, true, level.missed_days > 1, {class: "habit-check"} %>
      <%= check_box_tag nil, true, level.missed_days > 2, {class: "habit-check"} %>
   </p>
  <% end %>
<% end %>

habit.js

$(document).ready(function() {
  var handleChange = function() {
    habit = $(this).parent().prev().attr("id");
    level = $('label', $(this).parent()).attr("id");
    if ($(this).is(":checked")) {
      $.ajax({
        url: "/habits/" + habit + "/levels/" + level + "/days_missed",
        method: "POST"
      });
    } else {
      $.ajax({
        url: "/habits/" + habit + "/levels/" + level + "/days_missed/1",
        method: "DELETE"
      });
    }
    if (!$('input[type="checkbox"]:not(:checked)', $(this).parent()).length) {
      /* this is just an example, you will have to ammend this */
      $(this).parent().append($('<input type="checkbox" class="habit-check">'));
      $(this).parent().append($('<input type="checkbox" class="habit-check">'));
      $(this).parent().append($('<input type="checkbox" class="habit-check">'));
      $(".habit-check").on('change',handleChange);
    }
  }
  $(".habit-check").on('change',handleChange);
});

habit.rb

class Habit < ActiveRecord::Base
    belongs_to :user
    has_many :comments, as: :commentable
    has_many :levels
    serialize :committed, Array
    validates :date_started, presence: true
    before_save :current_level
    acts_as_taggable
    scope :private_submit, -> { where(private_submit: true) }
    scope :public_submit, -> { where(private_submit: false) }

attr_accessor :missed_one, :missed_two, :missed_three

    def save_with_current_level
        self.levels.build
        self.levels.build
        self.levels.build
        self.levels.build
        self.levels.build
        self.save
    end

    def self.committed_for_today
    today_name = Date::DAYNAMES[Date.today.wday].downcase
    ids = all.select { |h| h.committed.include? today_name }.map(&:id)
    where(id: ids)
  end 

    def current_level_strike
      levels[current_level - 1] # remember arrays indexes start at 0
    end

    def current_level
            return 0 unless date_started
          def committed_wdays
            committed.map do |day|    
              Date::DAYNAMES.index(day.titleize)
            end
          end

          def n_days
            ((date_started.to_date)..Date.today).count do |date| 
              committed_wdays.include? date.wday
            end - self.missed_days
          end     

      case n_days     
          when 0..9
            1
          when 10..24
            2
          when 25..44
            3
          when 45..69
            4
          when 70..99
            5
          else
            6
        end
    end
  end

days_missed_controller

class DaysMissedController < ApplicationController
  before_action :logged_in_user, only: [:create, :destroy]

  def create
    habit = Habit.find(params[:habit_id])
    habit.missed_days = habit.missed_days + 1
    habit.save!
    level = habit.levels.find(params[:level_id])
    level.missed_days = level.missed_days + 1
    level.save!
    head :ok # this returns an empty response with a 200 success status code
  end

  def destroy
    habit = Habit.find(params[:habit_id])
    habit.missed_days = habit.missed_days - 1
    habit.save
    level = habit.levels.find(params[:level_id])
    level.missed_days = level.missed_days - 1
    level.save!
    head :ok # this returns an empty response with a 200 success status code
  end
end

以下是要点：https://gist.github.com/RallyWithGalli/c66dee6dfb9ab5d338c2

如果您需要任何进一步的说明，代码或图片，请告诉我们。）

Answer 1

最简单的方法是使用本地存储（存储在用户浏览器中）。该功能存在于现代浏览器中，因此当您不需要支持旧版浏览器时，它是最佳选择。

使用也简直令人难以置信，只需在＆＃34; localStorage＆＃34;上设置和读取属性。变量：

# Set one value
localStorage.myapp_level1_flag1 = true;

# read the value
if (localStorage.myapp_level1_flag1) {
   ...
}

您当然应该为变量赋予有意义的名称。分配给localStorage的值将跨会话保存。还有一个变量＆＃34; sessionStorage＆＃34;只为一个会话保存数据。

此外，数据由设置的域分隔。因此，域X无法访问域Y设置的数据。

自IE8以来，大致支持本地存储，并且它具有优于cookie的优势，即数据不会在每次请求时传输到服务器。在存在本地存储之前，使用cookie，并附带一些性能开销。

<强>集成

我建议在代码中的两个位置集成本地存储（如果我理解你的JS大纲）：

（当然，你说，你不太了解JS，这样做事情要困难得多，因为解决方案完全取决于此在浏览器端的本地存储 - 但你需要从服务器端传输所有数据（这可能是必要的从长远来看，以防止数据重复））

第一个位置：当你创建复选框时（只是一个粗略的例子）：

if (localStorage.habit_level1_flag1) {
    $(this).parent().append($('<input type="checkbox" class="habit-check" checked>'));
}
else {
    $(this).parent().append($('<input type="checkbox" class="habit-check">'));
}

另一个位置是变更处理程序：

if ($(this).is(":checked")) {
  $.ajax({
    url: "/habits/" + habit + "/levels/" + level + "/days_missed",
    method: "POST"
  });
  localStorage.setItem("habit_"+habit+"_"+level, true);
} else {
  $.ajax({
    url: "/habits/" + habit + "/levels/" + level + "/days_missed/1",
    method: "DELETE"
  });
  localStorage.setItem("habit_"+habit+"_"+level, true);
}

点击此处了解有关localStorage。

的更多信息

如何使Javascript生成的复选框保持不变？

1 个答案: