Last updated
npm i -D memorio/*
IMPORTANT!
Add import only at first start of your SPA. Became global!.
You don't need to import any time you need to use memorio
*/
import 'memorio';
// State Management
state.counter = 0;
state.active = false;
state.name = "john";
state.user = { name: 'John', age: 30 };
state.hours = [2,3,10,23]
// Observer Pattern
// Example: if you change the state.counter you get a console.log
observer(
'state.counter',
(newValue, oldValue) => {
console.log(`Counter changed from ${oldValue} to ${newValue}`);
}
);
// Store (Persistent Storage)
store.set('preferences', { theme: 'dark' });
const preferences = store.get('preferences');
// Session Storage
session.set('token', 'user-jwt-token');
const token = session.get('token');// Setting state
state.user = { name: 'John' };
// Getting state
const userName = state.user.name;
// Listing all states
console.log(state.list);
// Locking state (for Objects or Arrays)
state.user.lock();
// Removing state
state.remove('user');
// Clearing all states
state.removeAll();
// Basic observer
observer(
'state.user',
(newValue, oldValue) => {
console.log('User updated:', newValue);
}
);
// With React useState
const [user, setUser] = useState();
observer(
'state.user',
() => {
setUser(state.user);
}
);
// With React useEffect to avoid multiple observer after update
useEffect(
() => {
observer(
'state.user',
() => {
setUser(state.user);
}
);
}, []
);// Setting values
store.set('config', { theme: 'dark', language: 'en' });
// Getting values
const config = store.get('config');
// Removing specific value
store.remove('config');
// Getting store size
const size = store.size();
// Clearing store
store.removeAll();// Setting session data
session.set(
'userSession', {
id: 'user123',
lastActive: Date.now()
}
);
// Getting session data
const userData = session.get('userSession');
// Checking session size
const activeItems = session.size();
// Removing session data
session.remove('userSession');
// Clearing all session data
session.removeAll();