persist browse page search prefs, scrub not allowed chars for tag entry

app/browse.rb

@@ -2,6 +2,11 @@ get '/browse/?' do
   @page = params[:page]
   @page = 1 if @page.not_an_integer?
 
+  if params[:tag]
+    params[:tag] = params[:tag].gsub(Tag::INVALID_TAG_REGEX, '').gsub(/\s+/, '').slice(0, Tag::NAME_LENGTH_MAX)
+    @title = "Sites tagged #{params[:tag]}"
+  end
+
   if is_education?
     ds = education_sites_dataset
   else
@@ -20,10 +25,6 @@ get '/browse/?' do
     @site_tags[site_id] = tags.select {|t| t[:site_id] == site_id}.collect {|t| t[:name]}
   end
 
-  if params[:tag]
-    @title = "Sites tagged #{params[:tag]}"
-  end
-
   erb :browse
 end
 

views/_header_links.erb

@@ -4,7 +4,35 @@
   </li>
 <% end %>
   <li>
-    <a href="/browse">Websites</a>
+    <a href="/browse" id="browse-link">Websites</a>
+    <script>
+      document.addEventListener('DOMContentLoaded', () => {
+        const browseLink = document.getElementById('browse-link');
+
+        if (window.location.pathname === '/browse') {
+          const params = new URLSearchParams(window.location.search);
+          const persistParams = new URLSearchParams();
+          const validPattern = /^[a-zA-Z0-9 ]+$/;
+
+          ['sort_by', 'tag'].forEach(key => {
+            if (params.has(key)) {
+              const value = params.get(key);
+              if (value.length <= <%= Tag::NAME_LENGTH_MAX %> && validPattern.test(value)) {
+                persistParams.set(key, value);
+              }
+            }
+          });
+
+          localStorage.setItem('browseQuery', persistParams.toString());
+        }
+
+        const savedQuery = localStorage.getItem('browseQuery');
+
+        if (savedQuery) {
+          browseLink.href = `/browse?${savedQuery}`;
+        }
+      });
+    </script>
   </li>
   <% unless is_education? %>
   <li>

views/browse.erb

@@ -43,7 +43,7 @@
         <fieldset class="grouping">
           <% unless is_education? %>
             <label class="text-Label" for="tag"><span class="hide-on-mobile">Filter by </span>Tag:</label>
-            <input class="input-Area typeahead" id="tag" name="tag" type="text" placeholder="pokemon" value="<%= params[:tag] %>" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" dir="auto">
+            <input class="input-Area typeahead" id="tag" name="tag" type="text" placeholder="pokemon" value="<%= params[:tag] %>" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" dir="auto" oninput="this.value = this.value.replace(/[^a-zA-Z0-9]+/g, '')">
             <input style="vertical-align: -4px;margin-left: 4px;" type="submit" class="btn-Action" value="Filter">
           <% else %>
             <% if params[:tag] %>