Session Storage

Introduction

sessionStorage is a web storage feature similar to localStorage, but with a critical difference: it stores data only for the duration of the page session. Data stored in sessionStorage is cleared when the page session ends, which is usually when the browser tab or window is closed.

Using sessionStorage in JavaScript

sessionStorage is also a property of the window object and can be accessed using window.sessionStorage. Like localStorage, it stores data as JSON key-value pairs, with both key and value as strings.

• Setting Items: sessionStorage.setItem(key, value); Stores a key-value pair in sessionStorage.
• Getting Items: sessionStorage.getItem(key); Retrieves the value of the specified key from sessionStorage. Returns null if the key does not exist.
• Removing Items: sessionStorage.removeItem(key); Removes the specified key and its value from sessionStorage.
• Clearing All Data: sessionStorage.clear(); Clears all key-value pairs stored in sessionStorage for the session.
• Key Enumeration: sessionStorage.key(index); Returns the name of the nth key in sessionStorage, useful for iterating over keys.

Practical Examples

1. Storing Session Data:
   javascript Copy

   	// Storing user preferences in sessionStorage
   	sessionStorage.setItem('language', 'Norsk');
   	sessionStorage.setItem('fontSize', '16px');

2. Retrieving Session Data:
   javascript Copy

   	// Retrieving user preferences from sessionStorage
   	const language = sessionStorage.getItem('language');
   	const fontSize = sessionStorage.getItem('fontSize');
   	console.log(language, fontSize); // Logs: Norsk 16px

3. Removing Session Data:
   javascript Copy

   	// Removing the fontSize preference from sessionStorage
   	sessionStorage.removeItem('fontSize');

Seeing the data in sessionStorage

To view sessionStorage data, open the developer tools in your browser (F12 or Ctrl+Shift+I). Depending on your browser, the data will be under the Application tab (Chrome, Edge) or the Storage tab (Firefox). Under these tabs, you can navigate to the sessionStorage section for the current domain (usually ‘localhost’) and view the stored data.

Importance of sessionStorage in JavaScript Web Development

• Session Specific: Ideal for storing data needed only during a browser session, like form data or user selections.
• Client-Side Storage: Reduces server load by keeping temporary session data on the client side.
• Data Privacy and Security: Since the data is cleared after the session, it provides a level of privacy and security for sensitive information.

Key Concepts of sessionStorage

1. Session Scope: Data persists only for the page session duration.
2. Browser Support: Supported by most modern web browsers.
3. Storage Limit: Similar to localStorage, approximately 5MB of data storage per domain.

Conclusion

sessionStorage provides a useful mechanism for storing data that is relevant only during a single page session, making it a valuable tool for JavaScript web developers in creating more dynamic, interactive web applications.

Lesson Task

Brief

Explore the use of sessionStorage for temporary data storage.

Task: Implement sessionStorage

1. Create a new HTML page and link it to a JavaScript file.
2. In the JavaScript file, create a temporary settings object with properties like theme and volume.
3. Store the settings object in sessionStorage.
4. Retrieve the settings object from sessionStorage and log it to the console.

Solution:

	const settings = {
	  theme: 'dark',
	  volume: 70
	};
	
	sessionStorage.setItem('settings', JSON.stringify(settings));
	
	const settingsString = sessionStorage.getItem('settings');
	const settingsObject = JSON.parse(settingsString);
	
	console.log(settingsObject);