SessionStorage Basics in JavaScript

1// Method 1: Set item
2sessionStorage.setItem('sessionId', 'abc123');
3sessionStorage.setItem('pageViews', '5');
4sessionStorage.setItem('lastPage', '/home');
5
6// Method 2: Get item
7const sessionId = sessionStorage.getItem('sessionId');
8console.log('Session ID:', sessionId);
9
10// Method 3: Remove item
11sessionStorage.removeItem('pageViews');
12
13// Method 4: Clear all
14// sessionStorage.clear();
15
16// Method 5: Store object
17const sessionData = {
18    userId: 123,
19    username: 'John',
20    loginTime: new Date().toISOString()
21};
22
23sessionStorage.setItem('sessionData', JSON.stringify(sessionData));
24
25const storedData = JSON.parse(sessionStorage.getItem('sessionData'));
26console.log('Session Data:', storedData);
27
28// Method 6: Update page views
29let pageViews = parseInt(sessionStorage.getItem('pageViews') || '0');
30pageViews++;
31sessionStorage.setItem('pageViews', pageViews.toString());
32console.log('Page views:', pageViews);
33
34// Method 7: Track navigation
35function trackPage(page) {
36    const history = JSON.parse(sessionStorage.getItem('pageHistory') || '[]');
37    history.push({
38        page: page,
39        timestamp: new Date().toISOString()
40    });
41    sessionStorage.setItem('pageHistory', JSON.stringify(history));
42}
43
44trackPage('/home');
45trackPage('/about');
46trackPage('/contact');
47
48const history = JSON.parse(sessionStorage.getItem('pageHistory'));
49console.log('Page history:', history);
50
51// Method 8: Temporary form data
52function saveFormData(formData) {
53    sessionStorage.setItem('formData', JSON.stringify(formData));
54}
55
56function getFormData() {
57    const data = sessionStorage.getItem('formData');
58    return data ? JSON.parse(data) : null;
59}
60
61// Save form data
62saveFormData({
63    name: 'John',
64    email: 'john@example.com',
65    message: 'Hello'
66});
67
68// Retrieve form data
69const formData = getFormData();
70console.log('Form data:', formData);
71
72// Method 9: Session timeout
73function setSessionTimeout(minutes) {
74    const expiry = new Date().getTime() + (minutes * 60 * 1000);
75    sessionStorage.setItem('sessionExpiry', expiry.toString());
76}
77
78function isSessionValid() {
79    const expiry = sessionStorage.getItem('sessionExpiry');
80    if (!expiry) return false;
81    
82    return new Date().getTime() < parseInt(expiry);
83}
84
85setSessionTimeout(30); // 30 minutes
86console.log('Session valid:', isSessionValid());
87
88// Method 10: Clear on tab close
89window.addEventListener('beforeunload', function() {
90    // sessionStorage is automatically cleared when tab closes
91    // But you can add cleanup code here
92    console.log('Tab closing, sessionStorage will be cleared');
93});