Check for localStorage availability upon load

index.html

@@ -181,6 +181,11 @@
              text-align: center;
          }
 
+         #no-local-storage {
+             display: none;
+             color: red;
+         }
+
          .box {
              width: 80%;
              border-width: 2px;
@@ -205,10 +210,44 @@
                     <span class="light-mode-hide">☼</span>
                 </label>
             </div>
-            <h1>Cypher Player Assistant</h1>
+            <h1>
+                Cypher Player Assistant
+                <span id="no-local-storage" title="Local Storage is not available. You can import/export data, but the app won’t save it between sessions!">!</span>
+            </h1>
             <div id="no-loaded-container" class="box">
                 No character is loaded.
             </div>
         </div>
+        <script>
+         const checkLocalStorage = () => {
+             let storage;
+             try {
+                 storage = window.localStorage;
+                 const x = "__storage_test__";
+                 storage.setItem(x, x);
+                 storage.removeItem(x);
+
+                 return true;
+             } catch (e) {
+                 return (
+                     e instanceof DOMException &&
+                     e.name === "QuotaExceededError" &&
+                     // acknowledge QuotaExceededError only if there's something already stored
+                     storage &&
+                     storage.length !== 0
+                 );
+             }
+         };
+
+         document.addEventListener(
+             "DOMContentLoaded",
+             () => {
+                 if (!checkLocalStorage()) {
+                     document.getElementById("no-local-storage").style.display = "initial";
+                     alert("Local Storage is not available, saving and loading data will be unavailable.");
+                 }
+             },
+         );
+        </script>
     </body>
 </html>