Using session storage for persisting user-specific text editor settings in JavaScript

21 Sep 2023

WebDevelopment

In modern web applications, it is often necessary to persist user-specific settings across multiple sessions or page reloads. One common use case is a text editor, where users may want to save their preferred settings like font size, theme, or word wrap. In this blog post, we will explore how to leverage session storage in JavaScript to achieve this.

What is Session Storage?

Session storage is a type of web storage that allows you to store key-value pairs of data locally within the user’s browser session. Unlike local storage, session storage is cleared automatically when the session ends, such as when the user closes the browser tab or window.

Persisting Text Editor Settings

To illustrate how we can use session storage to persist text editor settings, let’s consider a simple HTML page containing a text editor textarea and a few settings options:

<!DOCTYPE html>
<html>
<head>
    <title>Text Editor</title>
    <style>
        textarea {
            height: 200px;
            width: 400px;
        }
    </style>
</head>
<body>
    <textarea id="editor"></textarea>
    <label for="font-size">Font Size:</label>
    <input type="number" id="font-size">
    <label for="theme">Theme:</label>
    <select id="theme">
        <option value="light">Light</option>
        <option value="dark">Dark</option>
        <option value="solarized">Solarized</option>
    </select>
    <label for="word-wrap">Word Wrap:</label>
    <input type="checkbox" id="word-wrap">
</body>
</html>

To persist the user’s settings, we will use event listeners in JavaScript to capture changes to the settings controls and store them in session storage.

Here’s an example of how we can achieve this:

const editor = document.getElementById('editor');
const fontSizeInput = document.getElementById('font-size');
const themeSelect = document.getElementById('theme');
const wordWrapCheckbox = document.getElementById('word-wrap');

// Load the saved settings from session storage on page load
window.addEventListener('DOMContentLoaded', () => {
    if (sessionStorage.getItem('textEditorSettings')) {
        const settings = JSON.parse(sessionStorage.getItem('textEditorSettings'));
        editor.style.fontSize = settings.fontSize || '12px';
        editor.style.backgroundColor = settings.theme || 'white';
        editor.style.wordWrap = settings.wordWrap ? 'wrap' : 'nowrap';
        fontSizeInput.value = settings.fontSize || '12';
        themeSelect.value = settings.theme || 'light';
        wordWrapCheckbox.checked = settings.wordWrap || false;
    }
});

// Save the settings to session storage whenever a change occurs
editor.addEventListener('input', saveSettings);
fontSizeInput.addEventListener('change', saveSettings);
themeSelect.addEventListener('change', saveSettings);
wordWrapCheckbox.addEventListener('change', saveSettings);

// Function to save the settings in session storage
function saveSettings() {
    const settings = {
        fontSize: fontSizeInput.value,
        theme: themeSelect.value,
        wordWrap: wordWrapCheckbox.checked
    };
    sessionStorage.setItem('textEditorSettings', JSON.stringify(settings));
}

In this code snippet, we first retrieve the relevant DOM elements using getElementById.

Next, the DOMContentLoaded event listener is used to load the previously saved settings from session storage. We parse the stored JSON string and apply the settings to the text editor and controls.

Subsequently, we attach event listeners to the text editor and settings controls to capture any changes made by the user. Whenever a change occurs, the saveSettings function is called to save the current settings in session storage.

Conclusion

Using session storage in JavaScript provides us with a simple and effective way to persist user-specific text editor settings. By storing the settings locally within the user’s browser session, we can maintain their preferred state across page reloads and ensure a seamless user experience.

#WebDevelopment #JavaScript