如何使Javascript生成的复选框保持不变？
脚本中的“ajax”向服务器发送发布或删除消息。 包含ajax的javascript是添加复选框的内容。 我们如何才能使创建的复选框元素保持不变，以便当用户刷新页面时它们仍然存在？
习惯/ _form.html.erb
<label id="" class="habit-id"> Missed: = (index + 1) %> <label id="" class="level-id"> Level : 0, {class: "habit-check"} %> 1, {class: "habit-check"} %> 2, {class: "habit-check"} %>
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($('')); $(this).parent().append($('')); $(this).parent().append($('')); $(".habit-check").on('change',handleChange); } } $(".habit-check").on('change',handleChange); });
habit.rb
class Habit { 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
如果您需要任何进一步的解释，代码或图片，请告诉我:)
最简单的方法是使用本地存储（存储在用户浏览器中）。 该function存在于现代浏览器中，因此当您不需要支持旧版浏览器时，它是最佳选择。
用法也简直令人难以置信，只需在“localStorage”变量上设置和读取属性：
# Set one value localStorage.myapp_level1_flag1 = true; # read the value if (localStorage.myapp_level1_flag1) { ... }
你当然应该给变量有意义的名字。 分配给localStorage的值将跨会话保存。 还有一个变量“sessionStorage”，它只为一个会话保存数据。
此外，数据由设置的域分隔。 因此域X无法访问域Y设置的数据。
自IE8以来，大致支持本地存储，并且它具有优于cookie的优势，即数据不会在每次请求时传输到服务器。 在存在本地存储之前，使用cookie，附加一些性能开销。
积分
我建议在代码中的两个位置集成本地存储（如果我理解你的JS大纲）：
（当然，你说，你不太了解JS，这使事情变得更加困难，因为解决方案完全取决于浏览器端的本地存储 – 但是你需要传输所有数据您的服务器端（从长远来看可能是必要的，以防止数据重复））
第一个位置：当你创建复选框时（只是一个粗略的例子）：
if (localStorage.habit_level1_flag1) { $(this).parent().append($('')); } else { $(this).parent().append($('')); }
另一个位置是变更处理程序：
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的更多信息。