Use PnPjs to handle data in local and session storage

Introduction

Proceeding with the appointments with the PnP packages, the PnPjs package is a great tool to help developers getting things done pretty quickly. With that in mind, in this post we will cover the PnPClientStorage class offered by the package.

If you’re interested you can find the code of this sample here.

Visual appearance

Starting with the visual appearance of the sample solution, it displays as follows:

The first textbox is used to enter the value to be saved in the storage, after that there are some controls about how to store the value:

• the Storage Type toggle lets the user select if the value will be stored in the local or session storage.
• the Expiration slider enables setting the expiration of the saved value from 1 to 10 minutes before expiring and no longer usable.
• a Save Value button, which will of course enable the inserted text to be saved, for the specified time range and in the selected storage.
• a Delete Value button, to manually delete the stored value in the selected storage.
• finally, the Retrieve Value button which will retrieve the stored value and display it in the adjacent label.

All the operations add a message in the top section of the component, this is used to communicate with the user that the operation has taken place.

For example, if the user insert a text and press the save button:

Then, when the user clicks on the retrieve button, a message appears and the retrieved value will be shown in the bottom label:

If the user clicks on the retrieve button before saving anything, or when the expiration period has passed, no value will be found:

If the user decides to manually delete the stored value and clicks on the delete button, a new message will appear notifying of the completed operation:

After deletion, if the user tries to retrieve the value it will not be found and the label reports it:

Now that we have a clear understanding of how the sample solution works, let’s cover what’s the code behind it.

Show me the code

Prerequisites

To utilize the PnPjs package in your solution, you will first have to install it. For example, using NPM you can execute the following:

npm install @pnp/sp --save

In this sample, only the basic package is installed, if you need to access the Microsoft Graph APIs I suggest that you also install the @pnp/graph

If you need help regarding the installation of the package you can check out the official installation documentation here.

Once installed, you can import the required components in your solution with the following import statement:

import { PnPClientStorage } from "@pnp/core";

With this in mind, let’s cover how to use the PnPClientStorage class.

Usage of the PnPClientStorage class

Initialize storage

To use the storage it’s mandatory to instantiate it, to create an instance of the object you can simply create do as follows:

const storage = new PnPClientStorage();

Once instantiated, you can decide which storage to use, and the available options are:

• session
• local

In the sample, the storage used is specified by a toggle and retrieved with the following function:

private _getStorage() {
  const storage = new PnPClientStorage();
  return this.state.storageType === 'session' 
         ? storage.session : storage.local;
}

Save value

To start using the instantiated object, it’s possible to add a new value to the storage. To save a value use the put method, this method accepts:

• the storage key to be used to uniquely identify the entry
• the value to be inserted in the storage
• the expiration date/time of the entry

As reference, this is the method used in the sample application:

private _saveValue = (): void => {
  const { insertedValue, expirationMinutes } =
     this.state;
  const storage = this._getStorage();

  storage.put(
    this._storageKey,
    insertedValue,
    new Date(
      Date.now() + (expirationMinutes || 5) * 60000)
    );

    // Omitted for brevity
}

Here, the insertedValue is stored with the static _storageKey identifier with an expiration time of now plus the selected minutes slider value (or defaulted to 5).

Retrieve value

Once a value is added to the storage, it is possible to retrieve it using the get method. This get method accepts only the key of the entry and returns the stored value.

In the sample solution, the method used is the following:

private _retrieveValue = (): string | undefined => {
  const storage = this._getStorage();
  return storage.get(this._storageKey);
}

NB: be sure to use the same storage when adding and retrieving values, otherwise you might get an unexpected result.

Delete value

When adding a new value, it’s possible to explicitly define the expiration date and time. However, it might be needed to manually delete the stored value and that’s possible using the delete function exposed by the storage object. This method accepts the key used to define the new entry.

In the sample application, the method to delete the value is simply the following:

private _deleteValue = (): void => {
  const storage = this._getStorage();
  storage.delete(this._storageKey);

  // Omitted for brevity
}

Conclusions

Using PnPjs Storage offers a cleaner, more structured alternative to direct browser storage. It provides built-in support for data expiration, automatic JSON handling, and a simplified API that reduces boilerplate. PnPjs ensures consistent coding patterns, especially if you’re already using the PnPjs library for SharePoint or Graph operations.

If you’re interested and want to know more about the PnPjs package, feel free to have a look at the official site here.

Hope this helps!