What is Key-Value Sources?
Key-value sources act as facades for external storages like local storage, session storage, cookies, and more. They implement a unified interface called KeyValueSource, which simplifies integration with various storage mechanisms.
In addition to storage access, key-value sources provide the ability to subscribe to data changes in external storages, enabling reactive updates within your application.
List of Key-Value Sources
-
Local Storage
Provides interaction with the browser’s local storage -
Session Storage
Provides interaction with the browser’s session storage -
Memory Storage
Provides interaction the memory storage -
Cookie
Provides interaction with the browser’s cookie
How to Use Key-Value Sources
Create a key-value source
Let’s start by creating a key-value source that manages data in localStorage:
import { localStorage } from '@bitfiber/rx';
// Create a key-value source
const lsSource = localStorage();
Modify data
Set or update the value for a specific key:
lsSource.set('theme', 'dark');
To remove the value for a key, use:
lsSource.remove('theme');
Retrieve data
Retrieve the current value for a key:
const value = lsSource.get('theme');
Subscribe to data changes
Key-value sources are reactive, meaning you can subscribe to changes for a specific key and respond accordingly:
lsSource.observe('theme').subscribe((theme) => {
if (theme === 'dark') {
// Perform logic for the dark theme
console.log('Dark theme activated!');
}
});
Any Data Types for Storages
Key-value sources such as localStorage
, sessionStorage
, and cookie
simplify the handling of
data by allowing you to store and retrieve values of any type, including objects, arrays, and
primitives. These sources automatically convert data into JSON strings when storing it and parse
JSON strings back into their original types when retrieving.
import {localStorage} from '@bitfiber/rx';
// Create a key-value source
const lsSource = localStorage();
// Set a preferences object in local storage
lsSource.set('preferences', {theme: 'dark', notifications: true});
// Retrieve the preferences object from local storage
const preferences = lsSource.get('preferences');
// Expected result: preferences is equal to {theme: 'dark', notifications: true}
console.log(preferences);