diff --git a/README.md b/README.md index 65f468c..ff5efce 100644 --- a/README.md +++ b/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 diff --git a/src/modules/apis/data.ts b/src/modules/apis/data.ts index 195d42b..6b1b85b 100644 --- a/src/modules/apis/data.ts +++ b/src/modules/apis/data.ts @@ -398,6 +398,24 @@ export const data: Array = [ 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', diff --git a/src/modules/apis/storage/index.ts b/src/modules/apis/storage/index.ts new file mode 100644 index 0000000..a3b64a3 --- /dev/null +++ b/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 { + 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 { + 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; diff --git a/src/modules/demos/storage/index.tsx b/src/modules/demos/storage/index.tsx new file mode 100644 index 0000000..c42cf62 --- /dev/null +++ b/src/modules/demos/storage/index.tsx @@ -0,0 +1,320 @@ +import run, { hasSupport } from '../../apis/storage'; +import React, {useEffect, useState} from "react"; +import {Input} from "@/components/Input"; +import {Button} from "@/components/Button"; + +export enum StorageType { + LOCAL = 'Local Storage', + SESSION = 'Session Storage', +} + +function Storage() { + const [localStorageData, setLocalStorageData] = useState>({}); + const [sessionStorageData, setSessionStorageData] = useState>({}); + const [storageType, setStorageType] = useState(null); + const [isSuccessful, setIsSuccessful] = useState(null); + + + const initData = () => { + setLocalStorageData(run.localStorageHandler.get()); + setSessionStorageData(run.sessionStorageHandler.get()); + setStorageType(null); + } + + const callback = (storageType: StorageType, isSuccessful: boolean): void => { + initData(); + setStorageType(storageType); + setIsSuccessful(isSuccessful); + setTimeout(() => setIsSuccessful(null), 2000); + } + + useEffect(() => { + initData(); + }, []); + + if (!hasSupport) { + return

Unsupported

; + } + + return ( + <> + <> + {isSuccessful !== null && ( +
+ {isSuccessful ? 'Success!' : 'Error'} + {isSuccessful + ? Key/Value pair saved successfully to {storageType}. + : Error saving Key/Value pair + } +
+ )} +

+ Local Storage + run.localStorageHandler.clear(initData)} + > + Clear Local Storage + +

+
+
+
+ +
+
+ +
+ +
+
+ + + + + + + + + {Object.keys(localStorageData).map((key: string, index: number) => { + return ( + + + + + ); + })} + +
+ Key + + Value +
+
+ {key} +
+ 		+ + {localStorageData[key]} + +
+
+
+ + + <> +

+ Session Storage + run.sessionStorageHandler.clear(initData)} + > + Clear Session Storage + +

+
+
+
+ +
+
+ +
+ +
+
+ + + + + + + + + {Object.keys(sessionStorageData).map((key: string, index: number) => { + return ( + + + + + ); + })} + +
+ Key + + Value +
+
+ {key} +
+ 		+ + {sessionStorageData[key]} + +
+
+
+ + + ); +} + +export default Storage;