local-memory-storage v1.0.5
local-memory-storage
An in-memory typescript implementation of the Web Storage API that should be API-compatible with localStorage.
In addition to supporting Web Storage methods (getItem, setItem, removeItem, clear), this library also closely matches localStorage's behaviour for enumerating and serializing its keys and values.
Usage Example
import { memoryStorage } from 'local-memory-storage';
memoryStorage.setItem('abc', 'xyz');
memoryStorage.getItem('abc'); //> 'xyz'
memoryStorage['abc']; //> 'xyz'
Object.keys(memoryStorage); //> ['abc']
JSON.stringify(memoryStorage); //> {"abc":"xyz"}If separate instances are desired, the base class can imported instead
import { LocalMemoryStorage } from 'local-memory-storage';
const memoryStorage = new LocalMemoryStorage();Sample usage for conditionally replacing localStorage
import { memoryStorage } from 'localmemorystorage';
const canUseLocalStorage = () => {
try {
const testKey = '__test_if_localstorage_is_available__';
localStorage.setItem(testKey, testKey);
localStorage.removeItem(testKey);
return true;
} catch (e) {
return false;
}
};
export const localStorageWithMemoryFallback = canUseLocalStorage()
? localStorage
: memoryStorage;Motivation
Trying to access localStorage in incognito mode if your app is being embedded can result in this error:
Uncaught SecurityError: Failed to read the 'localStorage' property from 'Window': Access is denied for this document
One way to solve that would be to create a file like the above example to export a localStorageWithMemoryFallback, and set eslint rules to disallow direct usage of localStorage
// eslintrc.js
module.exports = {
// ...
rules: {
// ...
"no-restricted-globals": [
{
name: "localStorage",
message: "Use `localStorageWithMemoryFallback` instead",
},
],
"no-restricted-properties": [
"error",
{
object: "window",
property: "localStorage",
message: "Use `localStorageWithMemoryFallback` instead",
},
],
},
};