From 85651566f63b65cb7f7cc680db0373f7d40a5889 Mon Sep 17 00:00:00 2001 From: Arctic Ice Studio Date: Tue, 4 Dec 2018 05:34:15 +0100 Subject: [PATCH] Implement session storage/cache utility functions To persist the current active theme mode when changing the route (which unmounts the `Root` component and therefore resets the state), the value will be written to the browser's session storage (1). The storage type has been preferred over the local storage (2) since this would persist the active theme mode even when the user closes the tab, but the desired behavior is to optimize the site for the "bright snow flurry" aura theme mode. To simplify the read- and write handling as well as prevent possible errors due to wrong storage keys, two utility functions have been implemented: - `readSessionCache(key : string)` - Reads the value of the given key from the session storage (if available). - `writeSessionCache(key : string, value : any)` - Writes the given key-value pair to the session storage (if available). References: (1) https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage (2) https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage Associated epic: GH-51 GH-57 --- src/config/stores/caches/constants.js | 43 +++++++++++++++++++ src/utils/index.js | 19 +++++++++ src/utils/sessionCache.js | 60 +++++++++++++++++++++++++++ 3 files changed, 122 insertions(+) create mode 100644 src/config/stores/caches/constants.js create mode 100644 src/utils/index.js create mode 100644 src/utils/sessionCache.js diff --git a/src/config/stores/caches/constants.js b/src/config/stores/caches/constants.js new file mode 100644 index 00000000..e23a6157 --- /dev/null +++ b/src/config/stores/caches/constants.js @@ -0,0 +1,43 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +/** + * @file Provides internally cache related store constants. + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.2.0 + */ + +import { metadataNordDocs } from "data/project"; + +/** + * The prefix for keys stored in the session/local storage. + * + * @constant {string} + * @since 0.2.0 + */ +const SESSIONSTORAGE_KEY_PREFIX = `${metadataNordDocs.name}`; + +/** + * The separator for keys stored in the session/local storage. + * + * @constant {string} + * @since 0.2.0 + */ +const SESSIONSTORAGE_KEY_SEPARATOR = ":"; + +/** + * The session/local storage key for the theme mode. + * + * @constant {string} + * @since 0.2.0 + */ +const SESSIONSTORAGE_KEY_THEME_MODE = `${SESSIONSTORAGE_KEY_PREFIX}${SESSIONSTORAGE_KEY_SEPARATOR}themeMode`; + +export { SESSIONSTORAGE_KEY_PREFIX, SESSIONSTORAGE_KEY_SEPARATOR, SESSIONSTORAGE_KEY_THEME_MODE }; diff --git a/src/utils/index.js b/src/utils/index.js new file mode 100644 index 00000000..ce9b4653 --- /dev/null +++ b/src/utils/index.js @@ -0,0 +1,19 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +/** + * @file Provides utility functions and classes. + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.2.0 + */ + +import { readSessionCache, writeSessionCache } from "./sessionCache"; + +export { readSessionCache, writeSessionCache }; diff --git a/src/utils/sessionCache.js b/src/utils/sessionCache.js new file mode 100644 index 00000000..4dcabc77 --- /dev/null +++ b/src/utils/sessionCache.js @@ -0,0 +1,60 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +/** + * @file Provides utility functions for session storage and caching. + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.2.0 + */ + +/** + * Checks if the global session storage object is available in the current environment. + * + * @private + * @method hasSessionStorage + * @return {Boolean} `true` if the global session storage object is available, `false` otherwise. + * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage + * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects + */ +const hasSessionStorage = () => typeof window !== "undefined" && window.sessionStorage !== "undefined"; + +/** + * Reads the value of the given key from the session storage (if available). + * + * @method readSessionCache + * @param {string} key The name of the key from which the value should be read. + * @return {string|null} The value of the given key, `null` otherwise if the global session storage is not available in + * the current environment. + */ +const readSessionCache = key => { + if (hasSessionStorage()) { + return sessionStorage.getItem(key); + } + return null; +}; + +/** + * Writes the given key-value pair to the session storage (if available). + * + * @method writeSessionCache + * @param {string} key The name of the key for the paired value. + * @param {string} value The value for the given key. + * @return {void}, `true` if the value has been set, `false` otherwise if the global session storage is not available + * in the current environment. + */ +const writeSessionCache = (key, value) => { + if (hasSessionStorage()) { + sessionStorage.setItem(key, value); + return true; + } + return false; +}; + +export { readSessionCache, writeSessionCache };