Typing the username each time you reload the page gets tedious. It would be better to store that username in the browser. For simple storage, the browser provides two APIs for storing key/value pairs (with one limitation – the value must be a string). These are localStorage and sessionStorage. The data stored in localStorage and sessionStorage is associated with your web application’s server address. Code from different sites cannot access each other’s data.

Using localStorage would work. But you might only want to keep the username until you close the tab or the window, so in this case you will use the sessionStorage API. It is just like localStorage, but the data is erased when the browsing session ends (either by closing the browser tab or the window).

You will create a new set of classes to manage your sessionStorage information.

Create a new file named storage.js in the app/scripts/src folder and add a class definition:

class Store {
  constructor(storageApi) {
    this.api = storageApi;
  }
  get() {
    return this.api.getItem(this.key);
  }

  set(value) {
    this.api.setItem(this.key, value);
  }
}

Your new Store class is generic and can be used with either localStorage or sessionStorage. It is a thin wrapper around the Web Storage APIs. You specify which storage API you want to use when you instantiate one.

Notice that there are references to this.key, which is not set in the constructor. This implementation of Store is not intended to be used on its own. Instead, you use it by building a subclass that defines the key property.

Create a subclass, using the extends keyword, that you can use for storing the username in sessionStorage:

class Store {
  constructor(storageApi) {
    this.api = storageApi;
  }
  get() {
    return this.api.getItem(this.key);
  }

  set(value) {
    this.api.setItem(this.key, value);
  }
}

export class UserStore extends Store {
  constructor(key) {
    super(sessionStorage);
    this.key = key;
  }
}

UserStore only defines a constructor, which performs two actions. First, it calls super, which invokes the Store’s constructor, passing it a reference to sessionStorage. Second, it sets the value of this.key.

Now the value of api is set for the Store, and the value of key is set for the UserStore instance. This means that all the pieces are in place for a UserStore instance to invoke the get and set methods.

UserStore will be what app.js will use, so that is what you export here.

Now to use your new UserStore. Import UserStore into app.js, create an instance, and use it to stash the username:

import socket from './ws-client';
import {UserStore} from './storage';
import {ChatForm, ChatList, promptForUsername} from './dom';

const FORM_SELECTOR = '[data-chat="chat-form"]';
const INPUT_SELECTOR = '[data-chat="message-input"]';
const LIST_SELECTOR = '[data-chat="message-list"]';

let username = '';
let userStore = new UserStore('x-chattrbox/u');
let username = userStore.get();
if (!username) {
  username = promptForUsername();
  userStore.set(username);
}

class ChatApp {
  ...

Run Chattrbox one more time in your browser. This time, you should only be prompted for your username when you initially load the page. Subsequent reloads should have the same username you initially entered.

To confirm that your username is being stored in sessionStorage, you can use the resources panel in the DevTools. After you click to activate the resources panel, you will see a list on the left. Click the next to the Session Storage item in the list, revealing http://​localhost:3000. Click this URL to reveal the data being stored by UserStore (Figure 18.7).

Figure 18.7  The resources panel in the DevTools

At the bottom of this list of key value pairs, there are buttons for refreshing the list and for deleting items from the list. You can use these if you need to manually modify the stored data.