title: Flask: Make Application State Persist over tabs
body: <p>I'm new to Flask and am trying to create an application that can remotely control a voltage supply to set voltage/current and turn the voltage supply on and off on and off. With these actions, I would like to update some info on the webpage. </p>
  
  <p>The issue I'm running into is, if, for example, I set the power/current, I see the stats show up on the web page in the current table I'm in. But if I copy the same URL into another tab, I do not see the stats. Is there a way to show the stats on all web pages?</p>
  
  <p>Below is a snippet from my server.py. I think it has something to do with the return values and what I'm rendering upon return, but I'm not sure now to fix this.</p>
  
  <pre><code>@application.route('/set-power-current', methods=["GET", "POST"])
  def set_power_current():
      if request.method == "POST":
          req = request.form
          ip = req["ip"]
          serial = req["serial"]
          power = req["power"]
          current = req["current"]
          channel = req["channel"]
  
          set_power_current_channel(ip, serial, power, current, channel)
  
          feedback = {"Power": power, 
                      "Current":current,
                      "Channel":channel
                      }
          if int(channel) == 1:
              return render_template('index_server.html', data1=feedback)
          if int(channel) == 2:
              return render_template('index_server.html', data2=feedback)
          if int(channel) == 3:
              return render_template('index_server.html', data3=feedback)
          return redirect(request.url)
  
      return render_template('index_server.html')
  </code></pre>
  
  <p>Here is a snippet from my index_server.html to post the stats</p>
  
  <pre><code>&lt;h2&gt;Channel Stats&lt;/h2&gt;
  
  &lt;div class="row"&gt;
    &lt;div class="column" style="background-color:#aaa;"&gt;
      &lt;h2&gt;Channel 1&lt;/h2&gt;
      &lt;ul&gt;
        {% if data1 %}
                &lt;li&gt;Power: {{data1.Power}}&lt;/li&gt;
                &lt;li&gt;Current: {{data1.Current}}&lt;/li&gt;
        {% endif %}
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div class="column" style="background-color:#bbb;"&gt;
      &lt;h2&gt;Channel 2&lt;/h2&gt;
      &lt;ul&gt;
        {% if data2 %}
                &lt;li&gt;Power: {{data2.Power}}&lt;/li&gt;
                &lt;li&gt;Current: {{data2.Current}}&lt;/li&gt;
        {% endif %}
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div class="column" style="background-color:#ccc;"&gt;
      &lt;h2&gt;Channel 3&lt;/h2&gt;
      &lt;ul&gt;
        {% if data3 %}
                &lt;li&gt;Power: {{data3.Power}}&lt;/li&gt;
                &lt;li&gt;Current: {{data3.Current}}&lt;/li&gt;
        {% endif %}
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is what the current tab looks like after setting the values in Channel 3, for example:
  <a href="https://i.stack.imgur.com/fVbXl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fVbXl.png" alt="enter image description here"></a></p>
  
  <p>Here is what a new tab looks like after I set the values:
  <a href="https://i.stack.imgur.com/IHvju.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IHvju.png" alt="enter image description here"></a></p>
  
  <p>I would like to find a way for both tabs to look the same after values are set.</p>
  
  <p>Thanks!</p>