JavaScript
// Method 1: Basic session management
class SessionManager {
constructor() {
this.sessionKey = 'userSession';
}
createSession(userId, userData) {
const session = {
userId: userId,
userData: userData,
createdAt: Date.now(),
lastActivity: Date.now(),
token: this.generateToken()
};
sessionStorage.setItem(this.sessionKey, JSON.stringify(session));
return session;
}
getSession() {
const sessionStr = sessionStorage.getItem(this.sessionKey);
return sessionStr ? JSON.parse(sessionStr) : null;
}
updateActivity() {
const session = this.getSession();
if (session) {
session.lastActivity = Date.now();
sessionStorage.setItem(this.sessionKey, JSON.stringify(session));
}
}
destroySession() {
sessionStorage.removeItem(this.sessionKey);
}
isSessionValid(maxIdleTime = 3600000) {
const session = this.getSession();
if (!session) return false;
const idleTime = Date.now() - session.lastActivity;
return idleTime < maxIdleTime;
}
generateToken() {
return Math.random().toString(36).substring(2) + Date.now().toString(36);
}
}
const sessionManager = new SessionManager();
sessionManager.createSession(123, { name: 'John', role: 'user' });
console.log('Session:', sessionManager.getSession());
// Method 2: Auto-refresh session
function setupSessionRefresh() {
setInterval(() => {
const session = sessionManager.getSession();
if (session) {
sessionManager.updateActivity();
}
}, 60000); // Update every minute
}
// Method 3: Session timeout warning
function setupSessionTimeout(maxIdleTime, warningTime) {
setInterval(() => {
const session = sessionManager.getSession();
if (session) {
const idleTime = Date.now() - session.lastActivity;
const remaining = maxIdleTime - idleTime;
if (remaining < warningTime && remaining > 0) {
console.warn('Session expiring soon:', Math.floor(remaining / 1000), 'seconds');
} else if (remaining <= 0) {
console.log('Session expired');
sessionManager.destroySession();
}
}
}, 1000);
}
// Method 4: Multi-tab session sync
window.addEventListener('storage', function(e) {
if (e.key === 'userSession') {
const session = JSON.parse(e.newValue);
console.log('Session updated from another tab:', session);
// Update UI or redirect
}
});
// Method 5: Persistent session (localStorage)
class PersistentSession {
createSession(userId, userData, rememberMe = false) {
const session = {
userId: userId,
userData: userData,
createdAt: Date.now(),
lastActivity: Date.now(),
rememberMe: rememberMe
};
if (rememberMe) {
localStorage.setItem('userSession', JSON.stringify(session));
} else {
sessionStorage.setItem('userSession', JSON.stringify(session));
}
}
getSession() {
const session = sessionStorage.getItem('userSession') ||
localStorage.getItem('userSession');
return session ? JSON.parse(session) : null;
}
destroySession() {
sessionStorage.removeItem('userSession');
localStorage.removeItem('userSession');
}
}
const persistentSession = new PersistentSession();
persistentSession.createSession(123, { name: 'John' }, true);Output
Session: { userId: 123, userData: { name: 'John', role: 'user' }, createdAt: 1234567890, lastActivity: 1234567890, token: 'abc123xyz' }Session management tracks user state.
Session Storage
- sessionStorage: Tab-specific
- localStorage: Persistent
- Choose based on needs
Session Lifecycle
- Create: On login
- Update: On activity
- Validate: Check expiry
- Destroy: On logout
Features
- Auto-refresh
- Timeout warnings
- Multi-tab sync
- Remember me
Use Cases
- User authentication
- Activity tracking
- Security
- User preferences
Best Practices
- Update on activity
- Check validity
- Handle expiry
- Clear on logout