Rename localstorage and only trigger on filter change

src/day8/re_frame/localstorage.cljs

@@ -1,16 +0,0 @@
-(ns day8.re-frame.trace.localstorage
-  (:require [goog.storage.Storage :as Storage]
-            [goog.storage.mechanism.HTML5LocalStorage :as html5localstore]))
-
-(defn- storage []
-  (let [mech (goog.storage.mechanism.HTML5LocalStorage.)
-        store (goog.storage.Storage. mech)]
-    store))
-
-(defn get! [key]
-  (let [store (storage)]
-    (cljs.reader/read-string (.get store key))))
-
-(defn set! [key val]
-  (let [store (storage)]
-    (.set store key val)))

src/day8/re_frame/trace.cljs

@@ -6,7 +6,6 @@
             [re-frame.trace :as trace :include-macros true]
             [cljs.pprint :as pprint]
             [clojure.string :as str]
-            [cljs.reader :as reader]
             [reagent.core :as r]
             [reagent.interop :refer-macros [$ $!]]
             [reagent.impl.util :as util]
@@ -187,14 +186,18 @@
                                         (str (subs tag-str 0 string-size-limit) " ...")
                                         tag-str))]]))))))
 
-(defn render-trace-panel [])
+(defn render-trace-panel []
   (let [filter-input               (r/atom "")
-        filter-items               (r/atom [])
+        filter-items               (r/atom (or (localstorage/load "filter-items")
+                                               []))
         filter-type                (r/atom :contains)
         input-error                (r/atom false)
         trace-detail-expansions    (r/atom {:show-all? false :overrides {}})]
+    (add-watch filter-items
+               :update-localstorage
+               (fn [_ _ _ new-state]
+                 (localstorage/save! "filter-items" new-state)))
     (fn []
-      (localstorage/set! "filter-items" (str @filter-items))
       (let [showing-traces       (if (= @filter-items [])
                                    @traces
                                    (filter (apply every-pred (map query->fn @filter-items)) @traces))
@@ -256,7 +259,7 @@
                (when (pos? (count @traces))
                  [:span "(" [:button.text-button {:on-click #(do (trace/reset-tracing!) (reset! traces []))} "clear"] ")"])]
              [:th "meta"]]
-            [:tbody (render-traces showing-traces trace-detail-expansions)]]]])))
+            [:tbody (render-traces showing-traces trace-detail-expansions)]]]]))))
 
 (defn resizer-style [draggable-area]
   {:position "absolute" :z-index 2 :opacity 0

src/day8/re_frame/trace/localstorage.cljs

@@ -0,0 +1,17 @@
+(ns day8.re-frame.trace.localstorage
+  (:require [goog.storage.Storage :as Storage]
+            [goog.storage.mechanism.HTML5LocalStorage :as html5localstore]
+            [cljs.reader :as reader]))
+
+(def mech (goog.storage.mechanism.HTML5LocalStorage.))
+
+(defn- storage []
+  (goog.storage.Storage. mech))
+
+(defn load [key]
+  (when-let [value (.get (storage) key)]
+    (cljs.reader/read-string value)))
+
+(defn save! [key value]
+  (let [store (storage)]
+    (.set store key (pr-str value))))