SessionStorage Basics

// Method 1: Set item
sessionStorage.setItem('sessionId', 'abc123');
sessionStorage.setItem('pageViews', '5');
sessionStorage.setItem('lastPage', '/home');

// Method 2: Get item
const sessionId = sessionStorage.getItem('sessionId');
console.log('Session ID:', sessionId);

// Method 3: Remove item
sessionStorage.removeItem('pageViews');

// Method 4: Clear all
// sessionStorage.clear();

// Method 5: Store object
const sessionData = {
    userId: 123,
    username: 'John',
    loginTime: new Date().toISOString()
};

sessionStorage.setItem('sessionData', JSON.stringify(sessionData));

const storedData = JSON.parse(sessionStorage.getItem('sessionData'));
console.log('Session Data:', storedData);

// Method 6: Update page views
let pageViews = parseInt(sessionStorage.getItem('pageViews') || '0');
pageViews++;
sessionStorage.setItem('pageViews', pageViews.toString());
console.log('Page views:', pageViews);

// Method 7: Track navigation
function trackPage(page) {
    const history = JSON.parse(sessionStorage.getItem('pageHistory') || '[]');
    history.push({
        page: page,
        timestamp: new Date().toISOString()
    });
    sessionStorage.setItem('pageHistory', JSON.stringify(history));
}

trackPage('/home');
trackPage('/about');
trackPage('/contact');

const history = JSON.parse(sessionStorage.getItem('pageHistory'));
console.log('Page history:', history);

// Method 8: Temporary form data
function saveFormData(formData) {
    sessionStorage.setItem('formData', JSON.stringify(formData));
}

function getFormData() {
    const data = sessionStorage.getItem('formData');
    return data ? JSON.parse(data) : null;
}

// Save form data
saveFormData({
    name: 'John',
    email: '[email protected]',
    message: 'Hello'
});

// Retrieve form data
const formData = getFormData();
console.log('Form data:', formData);

// Method 9: Session timeout
function setSessionTimeout(minutes) {
    const expiry = new Date().getTime() + (minutes * 60 * 1000);
    sessionStorage.setItem('sessionExpiry', expiry.toString());
}

function isSessionValid() {
    const expiry = sessionStorage.getItem('sessionExpiry');
    if (!expiry) return false;
    
    return new Date().getTime() < parseInt(expiry);
}

setSessionTimeout(30); // 30 minutes
console.log('Session valid:', isSessionValid());

// Method 10: Clear on tab close
window.addEventListener('beforeunload', function() {
    // sessionStorage is automatically cleared when tab closes
    // But you can add cleanup code here
    console.log('Tab closing, sessionStorage will be cleared');
});