Replace cookies with localStorage

Cookies's use case is to store persistent data and send it to the server
in subsequent requests, such as to remember logged-in sessions. WebAO is
using them to store site settings like ad-hoc hash tables that require
parsing and serialization.

As a nasty side-effect of how cookies work, clients send all their
settings every time they connect to the server. Server has absolutely no
use for them, but each client sends them anyway, which is an
uncalled-for privacy leak.

Remove this mechanism entirely, switch to localStorage which serves
exactly the purpose of per-origin store with data that never leaves the
browser.

8 files changed, 13 insertions, 23 deletions

diff --git a/webAO/dom/changeBlipVolume.ts b/webAO/dom/changeBlipVolume.ts
index 2e77403f..e3a33130 100644
--- a/webAO/dom/changeBlipVolume.ts
+++ b/webAO/dom/changeBlipVolume.ts
@@ -1,4 +1,3 @@
-import setCookie from "../utils/setCookie";
 import { client } from "../client";
 /**
  * Triggered by the blip volume slider.
@@ -10,6 +9,6 @@ export const changeBlipVolume = () => {
   client.viewport.blipChannels.forEach(
     (channel: HTMLAudioElement) => (channel.volume = Number(blipVolume)),
   );
-  setCookie("blipVolume", blipVolume);
+  localStorage.setItem("blipVolume", blipVolume);
 };
 window.changeBlipVolume = changeBlipVolume;
diff --git a/webAO/dom/changeCallwords.ts b/webAO/dom/changeCallwords.ts
index e1258175..3777ce1f 100644
--- a/webAO/dom/changeCallwords.ts
+++ b/webAO/dom/changeCallwords.ts
@@ -1,5 +1,4 @@
 import { client } from "../client";
-import setCookie from "../utils/setCookie";
 
 /**
  * Triggered by a changed callword list
@@ -8,6 +7,6 @@ export function changeCallwords() {
   client.callwords = (<HTMLInputElement>(
     document.getElementById("client_callwords")
   )).value.split("\n");
-  setCookie("callwords", client.callwords.join("\n"));
+  localStorage.setItem("callwords", client.callwords.join("\n"));
 }
 window.changeCallwords = changeCallwords;
diff --git a/webAO/dom/changeMusicVolume.ts b/webAO/dom/changeMusicVolume.ts
index df0a6565..a564cc75 100644
--- a/webAO/dom/changeMusicVolume.ts
+++ b/webAO/dom/changeMusicVolume.ts
@@ -1,5 +1,4 @@
 import { client } from "../client";
-import setCookie from "../utils/setCookie";
 
 export const changeMusicVolume = (volume: number = -1) => {
   const clientVolume = Number(
@@ -9,6 +8,6 @@ export const changeMusicVolume = (volume: number = -1) => {
   client.viewport.music.forEach(
     (channel: HTMLAudioElement) => (channel.volume = musicVolume),
   );
-  setCookie("musicVolume", String(musicVolume));
+  localStorage.setItem("musicVolume", String(musicVolume));
 };
 window.changeMusicVolume = changeMusicVolume;
diff --git a/webAO/dom/changeVolume.ts b/webAO/dom/changeVolume.ts
index 0c94aa6c..dc258fb9 100644
--- a/webAO/dom/changeVolume.ts
+++ b/webAO/dom/changeVolume.ts
@@ -1,5 +1,3 @@
-import setCookie from "../utils/setCookie";
-
 declare global {
   interface Window {
     changeSFXVolume: () => void;
@@ -14,7 +12,7 @@ declare global {
 export function changeSFXVolume(): void {
   const sfxAudioElement = document.getElementById("client_sfxaudio") as HTMLAudioElement;
   if (sfxAudioElement) {
-    setCookie("sfxVolume", sfxAudioElement.volume);
+    localStorage.setItem("sfxVolume", sfxAudioElement.volume.toString());
   }
 }
 if (typeof window.changeSFXVolume !== 'function') {
@@ -27,9 +25,9 @@ if (typeof window.changeSFXVolume !== 'function') {
 export function changeTestimonyVolume(): void {
   const testimonyAudioElement = document.getElementById("client_testimonyaudio") as HTMLAudioElement;
   if (testimonyAudioElement) {
-    setCookie(
+    localStorage.setItem(
       "testimonyVolume",
-      testimonyAudioElement.volume
+      testimonyAudioElement.volume.toString()
     );
   }
 }
@@ -43,9 +41,9 @@ if (typeof window.changeTestimonyVolume !== 'function') {
 export function changeShoutVolume(): void {
   const shoutAudioElement = document.getElementById("client_shoutaudio") as HTMLAudioElement;
   if (shoutAudioElement) {
-    setCookie("shoutVolume", shoutAudioElement.volume);
+    localStorage.setItem("shoutVolume", shoutAudioElement.volume.toString());
   }
 }
 if (typeof window.changeShoutVolume !== 'function') {
   window.changeShoutVolume = changeShoutVolume;
-}
\ No newline at end of file
+}
diff --git a/webAO/dom/reloadTheme.ts b/webAO/dom/reloadTheme.ts
index c65ac6d2..eccb9349 100644
--- a/webAO/dom/reloadTheme.ts
+++ b/webAO/dom/reloadTheme.ts
@@ -1,5 +1,4 @@
 import { client } from "../client";
-import setCookie from "../utils/setCookie";
 
 /**
  * Triggered by the theme selector.
@@ -9,7 +8,7 @@ export const reloadTheme = () => {
     (<HTMLSelectElement>document.getElementById("client_themeselect")).value,
   );
 
-  setCookie("theme", client.viewport.getTheme());
+  localStorage.setItem("theme", client.viewport.getTheme());
   (<HTMLAnchorElement>document.getElementById("client_theme")).href =
     `styles/${client.viewport.getTheme()}.css`;
 };
diff --git a/webAO/dom/setChatbox.ts b/webAO/dom/setChatbox.ts
index c75559da..26182922 100644
--- a/webAO/dom/setChatbox.ts
+++ b/webAO/dom/setChatbox.ts
@@ -1,6 +1,5 @@
 import { CHATBOX, setCHATBOX } from "../client";
 import chatbox_arr from "../styles/chatbox/chatboxes.js";
-import setCookie from "../utils/setCookie";
 
 /**
  * Set the style of the chatbox
@@ -14,7 +13,7 @@ export function setChatbox(setstyle: string) {
   );
   setCHATBOX(themeselect.value);
 
-  setCookie("chatbox", CHATBOX);
+  localStorage.setItem("chatbox", CHATBOX);
   if (CHATBOX === "dynamic") {
     const style = setstyle.replace("chat", "");
     if (chatbox_arr.includes(style)) {
diff --git a/webAO/dom/showNameClick.ts b/webAO/dom/showNameClick.ts
index 005bfd57..375c67b3 100644
--- a/webAO/dom/showNameClick.ts
+++ b/webAO/dom/showNameClick.ts
@@ -1,15 +1,13 @@
-import setCookie from "../utils/setCookie";
-
 /**
  * Triggered when the showname checkboc is clicked
  * @param {MouseEvent} event
  */
 export function showname_click(_event: Event | null) {
-  setCookie(
+  localStorage.setItem(
     "showname",
     String((<HTMLInputElement>document.getElementById("showname")).checked),
   );
-  setCookie(
+  localStorage.setItem(
     "ic_chat_name",
     (<HTMLInputElement>document.getElementById("ic_chat_name")).value,
   );
diff --git a/webAO/dom/twofactor.ts b/webAO/dom/twofactor.ts
index 58bbc4c7..4f5fa81c 100644
--- a/webAO/dom/twofactor.ts
+++ b/webAO/dom/twofactor.ts
@@ -1,8 +1,7 @@
 import { client } from "../client";
-import setCookie from "../utils/setCookie";
 
 export function hcallback(hcaptcharesponse: string) {
-  setCookie("hdid", client.hdid);
+  localStorage.setItem("hdid", client.hdid);
   client.sender.sendServer(`2T#${hcaptcharesponse}#%`);
   location.reload();
 }