[FEATURE] Introduce wrapper for sessionStorage

TYPO3 now ships a new module acting as wrapper for `sessionStorage`. It
behaves similar to `localStorage`, except that the stored data is dropped
after the browser session has ended.

Resolves: #91738
Releases: master
Change-Id: I221ac1ea7b8a8a24b8490d7ddf55b92775e37d81

Build/Sources/TypeScript/backend/Resources/Public/TypeScript/Storage/AbstractClientStorage.ts

+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+/**
+ * Module: TYPO3/CMS/Backend/Storage/AbstractClientStorage
+ * @exports TYPO3/CMS/Backend/Storage/AbstractClientStorage
+ */
+export default abstract class AbstractClientStorage {
+  protected keyPrefix: string = 't3-';
+  protected storage: Storage = null;
+
+  public get(key: string): string {
+    if (this.storage === null) {
+      return null;
+    }
+    return this.storage.getItem(this.keyPrefix + key);
+  }
+
+  public set(key: string, value: string): void {
+    if (this.storage !== null) {
+      this.storage.setItem(this.keyPrefix + key, value);
+    }
+  }
+
+  public unset(key: string): void {
+    if (this.storage !== null) {
+      this.storage.removeItem(this.keyPrefix + key);
+    }
+  }
+
+  public unsetByPrefix(prefix: string): void {
+    if (this.storage === null) {
+      return;
+    }
+    prefix = this.keyPrefix + prefix;
+    Object.keys(this.storage)
+      .filter((key: string) => key.startsWith(prefix))
+      .forEach((key: string) => this.storage.removeItem(key));
+  }
+
+  public clear(): void {
+    if (this.storage !== null) {
+      this.storage.clear();
+    }
+  }
+
+  public isset(key: string): boolean {
+    if (this.storage === null) {
+      return false;
+    }
+    return this.get(key) !== null;
+  }
+}

Build/Sources/TypeScript/backend/Resources/Public/TypeScript/Storage/BrowserSession.ts

+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+import AbstractClientStorage from './AbstractClientStorage';
+
+/**
+ * Module: TYPO3/CMS/Backend/Storage/BrowserSession
+ * Wrapper for sessionStorage
+ * @exports TYPO3/CMS/Backend/Storage/BrowserSession
+ */
+class BrowserSession extends AbstractClientStorage {
+  public constructor() {
+    super();
+    this.storage = sessionStorage;
+  }
+}
+
+export = new BrowserSession();

Build/Sources/TypeScript/backend/Resources/Public/TypeScript/Storage/Client.ts

@@ -11,104 +11,17 @@
  * The TYPO3 project - inspiring people to share!
  */
 
+import AbstractClientStorage from './AbstractClientStorage';
+
 /**
  * Module: TYPO3/CMS/Backend/Storage/Client
  * Wrapper for localStorage
  * @exports TYPO3/CMS/Backend/Storage/Client
  */
-class Client {
-  private keyPrefix: string = 't3-';
-
-  /**
-   * @returns {boolean}
-   */
-  private static isCapable(): boolean {
-    return localStorage !== null;
-  }
-
-  /**
-   * Simple localStorage wrapper, to get value from localStorage
-   * @param {string} key
-   * @returns {string}
-   */
-  public get = (key: string): string => {
-    return Client.isCapable() ? localStorage.getItem(this.keyPrefix + key) : null;
-  }
-
-  /**
-   * Simple localStorage wrapper, to set value from localStorage
-   *
-   * @param {string} key
-   * @param {string} value
-   * @returns {string}
-   */
-  public set = (key: string, value: string): void => {
-    if (Client.isCapable()) {
-      localStorage.setItem(this.keyPrefix + key, value);
-    }
-  }
-
-  /**
-   * Simple localStorage wrapper, to unset value from localStorage
-   *
-   * @param {string} key
-   */
-  public unset = (key: string): void => {
-    if (Client.isCapable()) {
-      localStorage.removeItem(this.keyPrefix + key);
-    }
-  }
-
-  /**
-   * Removes values from localStorage by a specific prefix of the key
-   *
-   * @param {string} prefix
-   */
-  public unsetByPrefix = (prefix: string): void => {
-    if (!Client.isCapable()) {
-      return;
-    }
-
-    prefix = this.keyPrefix + prefix;
-
-    const keysToDelete: Array<string> = [];
-    for (let i = 0; i < localStorage.length; ++i) {
-      if (localStorage.key(i).substring(0, prefix.length) === prefix) {
-        // Remove the global key prefix, as it gets prepended in unset again
-        const key = localStorage.key(i).substr(this.keyPrefix.length);
-
-        // We can't delete the key here as this interferes with the size of the localStorage
-        keysToDelete.push(key);
-      }
-    }
-
-    for (let key of keysToDelete) {
-      this.unset(key);
-    }
-  }
-
-  /**
-   * Simple localStorage wrapper, to clear localStorage
-   */
-  public clear = (): void => {
-    if (Client.isCapable()) {
-      localStorage.clear();
-    }
-  }
-
-  /**
-   * Checks if a key was set before, useful to not do all the undefined checks all the time
-   *
-   * @param {string} key
-   * @returns {boolean}
-   */
-  public isset = (key: string): boolean => {
-    if (Client.isCapable()) {
-      const value = this.get(key);
-      return (typeof value !== 'undefined' && value !== null);
-    }
-
-    return false;
+class Client extends AbstractClientStorage {
+  public constructor() {
+    super();
+    this.storage = localStorage;
   }
 }
 

typo3/sysext/backend/Resources/Public/JavaScript/Storage/AbstractClientStorage.js

+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+define(["require","exports"],(function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.default=class{constructor(){this.keyPrefix="t3-",this.storage=null}get(e){return null===this.storage?null:this.storage.getItem(this.keyPrefix+e)}set(e,t){null!==this.storage&&this.storage.setItem(this.keyPrefix+e,t)}unset(e){null!==this.storage&&this.storage.removeItem(this.keyPrefix+e)}unsetByPrefix(e){null!==this.storage&&(e=this.keyPrefix+e,Object.keys(this.storage).filter(t=>t.startsWith(e)).forEach(e=>this.storage.removeItem(e)))}clear(){null!==this.storage&&this.storage.clear()}isset(e){return null!==this.storage&&null!==this.get(e)}}}));
\ No newline at end of file

typo3/sysext/backend/Resources/Public/JavaScript/Storage/BrowserSession.js

+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+define(["require","exports","./AbstractClientStorage"],(function(e,t,s){"use strict";class r extends s.default{constructor(){super(),this.storage=sessionStorage}}return new r}));
\ No newline at end of file

typo3/sysext/backend/Resources/Public/JavaScript/Storage/Client.js

@@ -10,4 +10,4 @@
  *
  * The TYPO3 project - inspiring people to share!
  */
-define(["require","exports"],(function(e,t){"use strict";class s{constructor(){this.keyPrefix="t3-",this.get=e=>s.isCapable()?localStorage.getItem(this.keyPrefix+e):null,this.set=(e,t)=>{s.isCapable()&&localStorage.setItem(this.keyPrefix+e,t)},this.unset=e=>{s.isCapable()&&localStorage.removeItem(this.keyPrefix+e)},this.unsetByPrefix=e=>{if(!s.isCapable())return;e=this.keyPrefix+e;const t=[];for(let s=0;s<localStorage.length;++s)if(localStorage.key(s).substring(0,e.length)===e){const e=localStorage.key(s).substr(this.keyPrefix.length);t.push(e)}for(let e of t)this.unset(e)},this.clear=()=>{s.isCapable()&&localStorage.clear()},this.isset=e=>{if(s.isCapable()){const t=this.get(e);return null!=t}return!1}}static isCapable(){return null!==localStorage}}return new s}));
\ No newline at end of file
+define(["require","exports","./AbstractClientStorage"],(function(e,t,r){"use strict";class s extends r.default{constructor(){super(),this.storage=localStorage}}return new s}));
\ No newline at end of file

typo3/sysext/core/Documentation/Changelog/master/Feature-91738-IntroduceWrapperForSessionStorage.rst

+.. include:: ../../Includes.txt
+
+======================================================
+Feature: #91738 - Introduce wrapper for sessionStorage
+======================================================
+
+See :issue:`91738`
+
+Description
+===========
+
+TYPO3 now ships a new module acting as wrapper for :js:`sessionStorage`. It
+behaves similar to :js:`localStorage`, except that the stored data is dropped
+after the browser session has ended.
+
+
+Impact
+======
+
+The module :js:`TYPO3/CMS/Core/Storage/BrowserSession` is available to be used
+to store data in the :js:`sessionStorage`.
+
+API Methods
+-----------
+
+* `get(key)` To fetch the data behind the key.
+* `set(key, value)` To set/override a key with any arbitrary content.
+* `isset(key)` (bool) checks if the key is in use.
+* `unset(key)` To remove a key from the storage.
+* `clear()` to empty all data inside the storage.
+* `unsetByPrefix(prefix)` to empty all data inside the storage with their keys
+  starting with a prefix
+
+.. index:: JavaScript, ext:core