demo-166-storage-api-webapis - Done

README.md

@@ -90,6 +90,7 @@ So far, it includes the following examples:
 1. 🌐 URL API
 1. 🗒️ Selection API
 1. 📃 Page Visibility API
+1. 💽 Storage API
 
 # 🤝 Open Source
 

src/modules/apis/data.ts

@@ -398,6 +398,24 @@ export const data: Array<Demo> = [
       apiDocURL: '',
       canIUseURL: 'https://caniuse.com/pagevisibility',
     },
+  }, 
+  {
+    id: 'storage', 
+    emoji: '💽',
+    title: 'Storage API', 
+    description: 'The Storage interface of the Web Storage API provides access to a particular domain\'s session or local storage. It allows, for example, the addition, modification, or deletion of stored data items.', 
+    meta: {
+      author: { 
+        name: 'Ade Adedoja',
+        social: {
+          email: 'damdey@gmail.com', 
+          github: 'ade1705',
+          twitter: 'TrussDamola',
+        },
+      },
+      apiDocURL: '',
+      canIUseURL: 'https://caniuse.com/storage', 
+    },
   },
   {
     id: 'selection-api',

src/modules/apis/storage/index.ts

@@ -0,0 +1,68 @@
+import {StorageType} from "@/modules/demos/storage";
+
+export const hasSupport = (): boolean => {
+  return 'localStorage' in window && 'sessionStorage' in window;
+}
+
+type StorageCallback = (session: StorageType, isSuccessful: boolean) => void;
+
+const localStorageHandler =  {
+  set(callback: StorageCallback): void {
+    const localStorageKeyElement = document.getElementById('js-input-local-storage--key') as HTMLInputElement;
+    const localStorageValueElement = document.getElementById('js-input-local-storage--value') as HTMLInputElement;
+    try {
+      localStorage.setItem(localStorageKeyElement.value, localStorageValueElement.value);
+      localStorageKeyElement.value = "";
+      localStorageValueElement.value = "";
+      callback(StorageType.LOCAL, true);
+    } catch (e) {
+      callback(StorageType.LOCAL, false);
+      console.error(`Unable to set localStorage ${e}`);
+    }
+  },
+  get(): Record<string, string> {
+    return ({...localStorage});
+  },
+  clear(callback: () => void): void {
+    try {
+      localStorage.clear();
+      callback();
+    } catch (e) {
+      console.error(`Unable to clear localStorage ${e}`);
+    }
+  },
+}
+
+const sessionStorageHandler =  {
+  set(callback: StorageCallback): void {
+    const sessionStorageKeyElement = document.getElementById('js-input-session-storage--key') as HTMLInputElement;
+    const sessionStorageValueElement = document.getElementById('js-input-session-storage--value') as HTMLInputElement;
+    try {
+      sessionStorage.setItem(sessionStorageKeyElement.value, sessionStorageValueElement.value);
+      sessionStorageKeyElement.value = "";
+      sessionStorageValueElement.value = "";
+      callback(StorageType.SESSION, true);
+    } catch (e) {
+      callback(StorageType.SESSION, false);
+      console.error(`Unable to set sessionStorage ${e}`);
+    }
+  },
+  get(): Record<string, string> {
+    return ({...sessionStorage});
+  },
+  clear(callback: () => void): void {
+    try {
+      sessionStorage.clear();
+      callback();
+    } catch (e) {
+      console.error(`Unable to clear sessionStorage ${e}`);
+    }
+  },
+}
+
+const run = {
+  sessionStorageHandler,
+  localStorageHandler,
+};
+
+export default run;