Rails - 会话变量不持久

Question

我想将侧边菜单的状态保存在 rails session 变量中，这样如果我的用户折叠侧边菜单，当视图更改时，折叠状态将持续存在。我设置了我的 js，以便未折叠状态将“0”发送到控制器，如果侧边菜单处于折叠状态，则 ajax 将“1”发送到控制器操作。如果控制器操作收到“1”，我希望在我的应用程序中设置该会话变量。

我目前对相应的控制器操作有一个 ajax 请求，折叠的侧导航正在成功发送一个“1”，但会话变量似乎没有持续存在。这是我在侧导航折叠时在控制台中看到的内容：

控制台： （当侧导航折叠时）

Started POST "/dashboard/side_nav_state" for 10.0.2.2 at 2015-06-02 15:58:08 +0000
Processing by DashboardController#side_nav_state as */*
  Parameters: {"hide_side_nav"=>"1"}
Completed 200 OK in 2ms (Views: 0.2ms | ActiveRecord: 0.0ms)

(侧边导航展开时)

Started POST "/dashboard/side_nav_state" for 10.0.2.2 at 2015-06-02 16:02:56 +0000
Processing by DashboardController#side_nav_state as */*
  Parameters: {"hide_side_nav"=>"0"}
Completed 200 OK in 2ms (Views: 0.2ms | ActiveRecord: 0.0ms)

JavaScript：

sendSideNav(); 函数实际上将 1 或 0 发送到控制器。如您所见，collapsedSideNav(); 函数发送 1。如果您查看 sendSideNav(); 函数，您可以看到 1 被传递到 ajax 请求中的数据键值对。

// collapsible side-nav functionality
function collapsedSideNav(){
  $('.side-nav').toggle(300);
  $('#collapse-side-nav').css('display', 'none');
  $('#expand-side-nav').css('display', 'inherit');
  $('.container').animate({
    'padding-left' : 0
  }, "slow");
  $('.row').css({
    'max-width' : '98%',
    'margin-left' : '1.15rem'
  });
  sendSideNavStatus(1);
};

// expandable side-nav functionality
function expandedSideNav(){
  $('.side-nav').toggle(325);
  $('#expand-side-nav').css('display', 'none');
  $('#collapse-side-nav').css('display', 'inherit');
  $('.container').animate({
    'padding-left' : 200
  }, "slow");
  $('.row').animate({
    'max-width' : '95%',
    'margin-left' : 'auto'
  });
  sendSideNavStatus(0);
};

// sends the state of the side-menu (if not default) to the controller so it can be stored in a session
// 1 for true, and 0 for false.
function sendSideNavStatus(trueOrFalse){
  $.ajax({
    url: '/dashboard/side_nav_state',
    method: 'POST',
    data: {hide_side_nav: trueOrFalse}
  });
};

// DOM Events for collapsing and expanding side-nav
$('#collapse-side-nav').click(function() {
  collapsedSideNav();
});
$('#expand-side-nav').click(function() {
  expandedSideNav();
});

路线

post 'dashboard/side_nav_state'

控制器操作

def side_nav_state
    session[:hide_side_nav] = params[:hide_side_nav] == "1" 
    render json: {success: true}
end

编辑：

我应该注意到，所有这些都发生在我的仪表板控制器中。无论我在哪个控制器中，我都希望此会话持续存在。这可能吗？我知道您无法路由到您的应用程序控制器，这就是我将逻辑设置到仪表板控制器的原因。我不确定这里的解决方案是什么。

Answer 1

对于其他最终遇到此问题且无法找到答案的人，我终于得出了如何解决问题的结论。

我发现 Rails 会话主要用于后端逻辑（用户身份验证、用户首选项等）。我上面的代码的问题是 我的 javascript 没有在任何地方收到会话变量。。 session 变量设置正确并保持不变，但因为我需要 session 变量作用的 javascript，所以拥有该变量是一个有争议的问题。

我可以设置一个post 端点并创建第二个ajax 请求。但这会创建很多额外的代码，包括另一个端点、另一个控制器操作以及 javascript。

因为 Rails 并没有真正提供让您的 javascript 与会话变量交互的好方法，所以对于这个特殊问题，我决定最好在客户端 100% 处理问题并创建浏览器 cookie。我使用了 cookie.js 库并相应地设置了 cookie。我的最终代码最终看起来像这样：

JAVASCRIPT：

$(document).ready(function(){
  Cookies.get();
  initializeSideNav();
});

// Checks the current status of the side menu
function initializeSideNav() {
  if (Cookies.get("collapsed-side-nav") === "true") {
    collapsedSideNav();
  }
}

// collapsible side-nav functionality
function collapsedSideNav(){
  $('.side-nav').toggle(300);
  $('#collapse-side-nav').css('display', 'none');
  $('#expand-side-nav').css('display', 'inherit');
  $('.container').animate({
    'padding-left' : 0
  }, "slow");
  $('.row').css({
    'max-width' : '98%',
    'margin-left' : '1.15rem'
  });
  Cookies.set('collapsed-side-nav', true, {path: '/'})
  console.log(Cookies.get());
};

// expandable side-nav functionality
function expandedSideNav(){
  $('.side-nav').toggle(325);
  $('#expand-side-nav').css('display', 'none');
  $('#collapse-side-nav').css('display', 'inherit');
  $('.container').animate({
    'padding-left' : 200
  }, "slow");
  $('.row').animate({
    'max-width' : '95%',
    'margin-left' : 'auto'
  });
  Cookies.set('collapsed-side-nav', false, {path: '/'});
  console.log(Cookies.get());
};

// DOM Events for collapsing and expanding side-nav
$('#collapse-side-nav').click(function() {
  collapsedSideNav();
});
$('#expand-side-nav').click(function() {
  expandedSideNav();
});