Use localStorage API to track toolbar state

Replaces storing the state in cookies. For simple key/value storage, the
API is simpler. Including a cookie with each HTTP request/response is
not necessary in modern browsers.

https://developer.mozilla.org/en-US/docs/Web/API/Storage

Author: jdufresne

debug_toolbar/middleware.py

@@ -82,10 +82,6 @@ def __call__(self, request):
         ):
             return response
 
-        # Collapse the toolbar by default if SHOW_COLLAPSED is set.
-        if toolbar.config["SHOW_COLLAPSED"] and "djdt" not in request.COOKIES:
-            response.set_cookie("djdt", "hide", 864000)
-
         # Insert the toolbar in the response.
         content = response.content.decode(response.charset)
         insert_before = dt_settings.get_config()["INSERT_BEFORE"]

debug_toolbar/static/debug_toolbar/js/toolbar.js

@@ -199,19 +199,17 @@
                 document.removeEventListener('mousemove', onHandleMove);
                 if (djdt.handleDragged) {
                     event.preventDefault();
-                    djdt.cookie.set('djdttop', handle.offsetTop, {
-                        path: '/',
-                        expires: 10
-                    });
+                    localStorage.setItem('djdt.top', handle.offsetTop);
                     setTimeout(function () {
                         djdt.handleDragged = false;
                     }, 10);
                 }
             });
-            if (djdt.cookie.get('djdt') === 'hide') {
-                djdt.hide_toolbar(false);
-            } else {
+            const show = localStorage.getItem('djdt.show') || djDebug.dataset.defaultShow;
+            if (show === 'true') {
                 djdt.show_toolbar();
+            } else {
+                djdt.hide_toolbar();
             }
         },
         hide_panels: function() {
@@ -224,7 +222,7 @@
                 e.classList.remove('djdt-active');
             });
         },
-        hide_toolbar: function(setCookie) {
+        hide_toolbar: function() {
             djdt.hide_panels();
 
             const djDebug = document.getElementById('djDebug');
@@ -233,20 +231,15 @@
             const handle = document.querySelector('#djDebugToolbarHandle');
             $$.show(handle);
             // set handle position
-            let handleTop = djdt.cookie.get('djdttop');
+            let handleTop = localStorage.getItem('djdt.top');
             if (handleTop) {
                 handleTop = Math.min(handleTop, window.innerHeight - handle.offsetHeight);
                 handle.style.top = handleTop + 'px';
             }
 
             document.removeEventListener('keydown', onKeyDown);
 
-            if (setCookie) {
-                djdt.cookie.set('djdt', 'hide', {
-                    path: '/',
-                    expires: 10
-                });
-            }
+            localStorage.setItem('djdt.show', 'false');
         },
         hide_one_level: function() {
             const djDebug = document.getElementById('djDebug');
@@ -263,10 +256,7 @@
             const djDebug = document.getElementById('djDebug');
             $$.hide(djDebug.querySelector('#djDebugToolbarHandle'));
             $$.show(djDebug.querySelector('#djDebugToolbar'));
-            djdt.cookie.set('djdt', 'show', {
-                path: '/',
-                expires: 10
-            });
+            localStorage.setItem('djdt.show', 'true');
         },
         cookie: {
             get: function(key){

debug_toolbar/templates/debug_toolbar/base.html

@@ -4,6 +4,7 @@
 <script src="{% static 'debug_toolbar/js/toolbar.js' %}" async></script>
 <div id="djDebug" class="djdt-hidden" dir="ltr"
      {% if toolbar.store_id %}data-store-id="{{ toolbar.store_id }}" data-render-panel-url="{% url 'djdt:render_panel' %}"{% endif %}
+     data-default-show="{% if toolbar.config.SHOW_COLLAPSED %}false{% else %}true{% endif %}"
      {{ toolbar.config.ROOT_TAG_EXTRA_ATTRS|safe }}>
   <div class="djdt-hidden" id="djDebugToolbar">
     <ul id="djDebugPanelList">