title: Why are my cookies randomly changing?
body: <p><strong>Introduction</strong></p>
  
  <p>I am working on an app with Rails 4 that functions as a simple dashboard, it iterates through several div containers sectioned off in quadrants on the home page that show various graphs/tables etc. I am using cookies to remember which index that the current displayed container is at so when the website reloads it displays the container that was being shown and not go back to the first one. </p>
  
  <p><strong>The Problem</strong></p>
  
  <p>Everything seemed to be working ok until I started noticing that the cookies started changing by themselves and I have no idea how. I have come to this conclusion since I set and get the cookies using a function, which prints to the console whenever its being called. And nothing is being logged to the console when these "rogue" changes occur. </p>
  
  <p>Here's the gist of how it works. The update function uses a helper function to get the cookie, calculates the next index depending on what the current index is, and then calls another helper function to store the cookie. The cookies are get and set only with those two functions.  </p>
  
  <pre><code>var update_quadrant = function(id) = 
   $.when(get_cookie(current_feed)).done(function(response) {
        var current_index = parseInt(response);
        var next_index = //depends on current_index
       $.when(store_cookie(current_feed, next_index, "from update")).done(function(response){
            //code that updates quadrant 
            setTimeout(function() { update_quadrant(id);}, 30000);
        });
  </code></pre>
  
  <p>Here's what some typical cookies would look like. </p>
  
  <pre><code>{"circleci" =&gt; "0", "newrelic" =&gt; "1", "googleanalytics" =&gt; "0"}
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  
  <p>Storing a cookie value</p>
  
  <pre><code>var store_cookie = function(feed, value, other) {
  return $.ajax({
      url: 'home/cookie_store',
      type: 'POST',
      data: {
          feed: feed,
          value: value,
          other: other || ""
      }
      }).done(function(response) {
      console.log(response);
      });
  };
  </code></pre>
  
  <p>Getting the cookie</p>
  
  <pre><code>var get_cookie = function(feed) {
      return $.ajax({
          url: 'home/cookie_get',
          data: {
              feed: feed
          }
      }).done(function(response) {
      console.log("Got cookie value: ", parseInt(response), "for ", feed);
      });
  };
  </code></pre>
  
  <p><strong>Controller</strong> </p>
  
  <p>Responding to ajax call to store cookie value</p>
  
  <pre><code>#home controller
   def store_cookie
      feed = params[:feed]
      value = params[:value]
      other = params[:other]
      cookies[feed] = value.to_s
      render text: "stored #{value} for #{feed}, other: #{other}"
   end
  </code></pre>
  
  <p>Responding to ajax call for a cookie value.</p>
  
  <pre><code>#home controller
   def give_cookie 
      feed = params[:feed]
      cookies[feed] = "0" if cookies[feed].blank?
      render text: cookies[feed.to_s]
   end
  </code></pre>
  
  <p><strong>What I've tried to test</strong></p>
  
  <p>I thought that maybe somehow the setTimeout function was persisting, and that multiple setTimeout timers were being executed but that doesn't change the fact that the <em>values were changing without anything being logged to the console from my store_cookie function.</em> </p>
  
  <p>For example, I set an <code>setInterval</code> that logs <code>document.cookie</code> to the console every second. Here's what will display. </p>
  
  <pre><code> "Stored 0 for circleci, other: from update quadrant" 
  //correctly changed with store_cookie function as it logs the response from the controller
  {"circleci" =&gt; "0", "newrelic" =&gt; "1", "googleanalytics" =&gt; "0"}
  ...//no change
  ...//no change
  ...//no change
  {"circleci" =&gt; "1", "newrelic" =&gt; "1", "googleanalytics" =&gt; "0"}
  //but nothing printed to console from store_cookie function 
  //quadrant eventually goes to update after 30 seconds, and gets wrong cookie value
  "Got cookie value: 1 for circleci" //should be 0 not 1
  </code></pre>
  
  <p>Even more baffling, when I go to click a link that uses a layout that doesn't include ANY javascript source files the cookie values are <em>still</em> being changed. </p>
  
  <p>I have been really struggling to get an idea of where to start debugging this since I have double and triple checked to make sure all cookie changes on the code side are changed with my store_cookie function and I'm seeing these cookie values being changed without anything being logged to the console, aka without the store_cookie function being called.  </p>
  
  <p>Does anyone have an idea whats causing my cookie values to seemingly change by themselves?</p>