Understanding Session Storage in ServiceNow Widgets: Client and Server-Side Techniques

[Alka_Chaudhary]

When building custom widgets in ServiceNow, managing session data effectively is crucial to providing a seamless user experience. Whether you're using client-side methods or leveraging server-side capabilities, understanding how to store, retrieve, and utilize session data can streamline your widget development process. This blog dives into client-side session storage using sessionStorage and server-side session management using gs.getSession().putClientData() in ServiceNow.

1. Client-Side Session Storage

The sessionStorage object allows you to store key-value pairs directly in the browser for the duration of the page session. It is a lightweight and easy-to-use method for persisting data across different widget interactions without re-fetching or recalculating the data.

Setting Items in Session Storage

Use the sessionStorage.setItem method to save data in the user's browser. Here's an example:

// Save a value to session storage
sessionStorage.setItem('selectedCategory', 'ServiceNow');

// Save an object to session storage as a JSON string
$scope.userDetails = { name: 'John Doe', role: 'Admin' };
sessionStorage.setItem('userDetails', JSON.stringify($scope.userDetails));

Getting Items from Session Storage

Retrieve the stored data using sessionStorage.getItem:

// Retrieve a value from session storage
var category = sessionStorage.getItem('selectedCategory');
spModal.alert('Selected Category: '+ category);

// Retrieve and parse JSON object from session storage
var retrievedUserDetails = JSON.parse(sessionStorage.getItem('userDetails'));
spModal.alert('User Details: ', JSON.stringify(retrievedUserDetails));

Removing Items from Session Storage

To clear specific items or the entire session storage:

// Remove a specific item
sessionStorage.removeItem('selectedCategory');

// Clear all items
sessionStorage.clear();

2. Server-Side Session Storage

On the server-side, ServiceNow provides the gs.getSession() API to manage session-specific data. This method is particularly useful for storing and retrieving user-specific data that persists across multiple server requests.

Setting Session Data

The putClientData method allows you to store session data associated with the current user session:

// Server-side script to set session data
gs.getSession().putClientData('preferredLanguage', 'English');

Getting Session Data

Retrieve the stored session data using getClientData:

// Server-side script to get session data
var preferredLanguage = gs.getSession().getClientData('preferredLanguage');
gs.addInfoMessage('Preferred Language: ' + preferredLanguage);

Clearing Session Data

There is no direct method to remove specific session keys, but you can overwrite them with null or blank values:

// Overwrite session data to clear
gs.getSession().putClientData('preferredLanguage', '');

Conclusion

Session storage is a powerful tool for widget development in ServiceNow. By combining the simplicity of client-side sessionStorage with the flexibility of server-side session management (gs.getSession()), you can create dynamic and efficient widgets tailored to your users' needs. Whether it's persisting preferences, managing temporary data, or optimizing API calls, mastering session storage techniques is a must for any ServiceNow developer.