Storage Session Management in JavaScript

1// Method 1: Basic session management
2class SessionManager {
3    constructor() {
4        this.sessionKey = 'userSession';
5    }
6    
7    createSession(userId, userData) {
8        const session = {
9            userId: userId,
10            userData: userData,
11            createdAt: Date.now(),
12            lastActivity: Date.now(),
13            token: this.generateToken()
14        };
15        sessionStorage.setItem(this.sessionKey, JSON.stringify(session));
16        return session;
17    }
18    
19    getSession() {
20        const sessionStr = sessionStorage.getItem(this.sessionKey);
21        return sessionStr ? JSON.parse(sessionStr) : null;
22    }
23    
24    updateActivity() {
25        const session = this.getSession();
26        if (session) {
27            session.lastActivity = Date.now();
28            sessionStorage.setItem(this.sessionKey, JSON.stringify(session));
29        }
30    }
31    
32    destroySession() {
33        sessionStorage.removeItem(this.sessionKey);
34    }
35    
36    isSessionValid(maxIdleTime = 3600000) {
37        const session = this.getSession();
38        if (!session) return false;
39        
40        const idleTime = Date.now() - session.lastActivity;
41        return idleTime < maxIdleTime;
42    }
43    
44    generateToken() {
45        return Math.random().toString(36).substring(2) + Date.now().toString(36);
46    }
47}
48
49const sessionManager = new SessionManager();
50sessionManager.createSession(123, { name: 'John', role: 'user' });
51console.log('Session:', sessionManager.getSession());
52
53// Method 2: Auto-refresh session
54function setupSessionRefresh() {
55    setInterval(() => {
56        const session = sessionManager.getSession();
57        if (session) {
58            sessionManager.updateActivity();
59        }
60    }, 60000); // Update every minute
61}
62
63// Method 3: Session timeout warning
64function setupSessionTimeout(maxIdleTime, warningTime) {
65    setInterval(() => {
66        const session = sessionManager.getSession();
67        if (session) {
68            const idleTime = Date.now() - session.lastActivity;
69            const remaining = maxIdleTime - idleTime;
70            
71            if (remaining < warningTime && remaining > 0) {
72                console.warn('Session expiring soon:', Math.floor(remaining / 1000), 'seconds');
73            } else if (remaining <= 0) {
74                console.log('Session expired');
75                sessionManager.destroySession();
76            }
77        }
78    }, 1000);
79}
80
81// Method 4: Multi-tab session sync
82window.addEventListener('storage', function(e) {
83    if (e.key === 'userSession') {
84        const session = JSON.parse(e.newValue);
85        console.log('Session updated from another tab:', session);
86        // Update UI or redirect
87    }
88});
89
90// Method 5: Persistent session (localStorage)
91class PersistentSession {
92    createSession(userId, userData, rememberMe = false) {
93        const session = {
94            userId: userId,
95            userData: userData,
96            createdAt: Date.now(),
97            lastActivity: Date.now(),
98            rememberMe: rememberMe
99        };
100        
101        if (rememberMe) {
102            localStorage.setItem('userSession', JSON.stringify(session));
103        } else {
104            sessionStorage.setItem('userSession', JSON.stringify(session));
105        }
106    }
107    
108    getSession() {
109        const session = sessionStorage.getItem('userSession') || 
110                       localStorage.getItem('userSession');
111        return session ? JSON.parse(session) : null;
112    }
113    
114    destroySession() {
115        sessionStorage.removeItem('userSession');
116        localStorage.removeItem('userSession');
117    }
118}
119
120const persistentSession = new PersistentSession();
121persistentSession.createSession(123, { name: 'John' }, true);