feat: save ignored tlds in cookies

src/App.vue

@@ -1,13 +1,22 @@
 <script setup lang="ts">
-import { ref, onMounted, defineAsyncComponent } from "vue";
+import { ref, onMounted, defineAsyncComponent, onBeforeMount } from "vue";
 const PageRandom = defineAsyncComponent(() => import("@/components/PageRandom.vue"));
 const PageInput = defineAsyncComponent(() => import("@/components/PageInput.vue"));
 const PageHistory = defineAsyncComponent(() => import("./components/PageHistory.vue"));
 import { DomainFactory } from "@/lib/factory";
+import { getCookie, IGNORED_TLDS_COOKIE } from "@/lib/cookies";
 
 const visible = ref<boolean>(false);
 const factory = ref<DomainFactory>(new DomainFactory());
 
+onBeforeMount(() => {
+  factory.value.ignoreTlds(
+    ...getCookie(IGNORED_TLDS_COOKIE)
+      .split(".")
+      .filter((tld: string) => tld.length),
+  );
+});
+
 onMounted(() => {
   setTimeout(() => {
     visible.value = true;

src/components/PageInput.vue

@@ -62,7 +62,7 @@ function newDomain() {
       <span v-else-if="domain.available"
         >&nbsp;{{ $t("seems") }}
         <a
-          :href="`https://tld-list.com/${$i18n.locale}/tld/${domain.extension}`"
+          :href="`https://tld-list.com/${$i18n.locale}/tld/${domain.tld}`"
           target="_blank"
           class="underline"
           >{{ $t("available") }}</a

src/components/PageRandom.vue

@@ -5,6 +5,7 @@ import type { DomainFactory } from "@/lib/factory";
 const CoolDomain = defineAsyncComponent(() => import("./CoolDomain.vue"));
 import type { Domain } from "@/types";
 import { useI18n } from "vue-i18n";
+import { IGNORED_TLDS_COOKIE, setCookie } from "@/lib/cookies";
 
 enum State {
   Loading,
@@ -60,9 +61,10 @@ function checkAvailability() {
   }
 }
 
-function removeExt() {
+function removeTld() {
   if (domain.value) {
-    props.factory.removeExtensions(domain.value.extension);
+    props.factory.ignoreTlds(domain.value.tld);
+    setCookie(IGNORED_TLDS_COOKIE, props.factory.ignoredTldList.join(","));
     newDomain();
   }
 }
@@ -108,7 +110,7 @@ watch(i18n.locale, newDomain);
     <div v-else-if="state === State.Ready && domain?.available" class="py-6">
       {{ $t("this_domain") }} {{ $t("seems") }}
       <a
-        :href="`https://tld-list.com/${$i18n.locale}/tld/${domain.extension}`"
+        :href="`https://tld-list.com/${$i18n.locale}/tld/${domain.tld}`"
         target="_blank"
         class="underline"
         >{{ $t("available") }}</a
@@ -131,8 +133,8 @@ watch(i18n.locale, newDomain);
     <br />
     <p v-if="domain">
       <small
-        ><a class="underline" href="#" @click.prevent="removeExt">{{
-          $t("page_random.dont_suggest", { ext: `.${domain.extension}` })
+        ><a class="underline" href="#" @click.prevent="removeTld">{{
+          $t("page_random.dont_suggest", { ext: `.${domain.tld}` })
         }}</a></small
       >
     </p>

src/lib/cookies.ts

@@ -0,0 +1,20 @@
+export function setCookie(name: string, value: string, days = 400) {
+  const date = new Date();
+  date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
+  const expires = `expires=${date.toUTCString()}`;
+  document.cookie = `${name}=${value}; path=/; ${expires}`;
+}
+
+export function getCookie(name: string, defaultValue = ""): string {
+  const prefix = `${name}=`;
+  const decodedCookie = decodeURIComponent(document.cookie);
+  const cookies = decodedCookie.split(";");
+  for (const cookie of cookies) {
+    if (cookie.trim().startsWith(prefix)) {
+      return cookie.trim().substring(prefix.length, cookie.length);
+    }
+  }
+  return defaultValue;
+}
+
+export const IGNORED_TLDS_COOKIE = "ignored_tlds";

src/lib/factory.ts

@@ -97,14 +97,14 @@ export class DomainFactory {
     });
   }
 
-  removeExtensions(...extensions: string[]): void {
-    this.ignoredTldList.push(...extensions);
+  ignoreTlds(...tlds: string[]): void {
+    this.ignoredTldList.push(...tlds);
   }
 
   newDomain(domain: string): Domain {
     return {
       name: domain,
-      extension: domain.split(".").slice(1).join("."),
+      tld: domain.split(".").slice(1).join("."),
       searching: false,
       available: true,
     };

src/types.ts

@@ -34,7 +34,7 @@ export interface WhoIsEntity {
 
 export interface Domain {
   name: string;
-  extension: string;
+  tld: string;
   available: boolean;
   searching: boolean;
 }