One critical feature of modern web applications is their ability to store and retrieve data on the client side. This is where local storage comes into play.

In this article, we'll explore how to leverage the power of the Blazored LocalStorage NuGet package to seamlessly integrate local storage capabilities into your Blazor applications.

Table of Contents

• Prerequisites
• Understanding Local Storage
• Introducing Blazored.LocalStorage
• Advantages of Using Blazored.LocalStorage in Blazor Applications
• How to Install Blazored.LocalStorage
• Install Using Nuget Package Manager
• Install Using the .NET CLI
• How to Use Blazored.LocalStorage
• Advanced Features and Techniques
• Conclusion

Prerequisites

Make sure you have the necessary tools installed on your computer before continuing with this guide:

• To build and update Blazor projects, you'll need Visual Studio, a feature-rich Integrated Development Environment (IDE) which you can download from the official Microsoft website here.
• The .NET SDK (Software Development Kit) has everything you need to create and execute .NET apps, and it's required for Blazor projects. Make sure your computer has the .NET SDK installed.
• Basic knowledge of C# and Blazor.

With these installed, will be ready to follow along.

Understanding Local Storage

Local storage is a key-value pair storage mechanism supported by modern web browsers. It provides a simple way to store data persistently on the user's device. Unlike session storage, which is cleared when the browser session ends, local storage remains intact even after closing the browser window.

Blazored.LocalStorage is a powerful library that simplifies working with the browser's local storage API (Application Programming Interface) within Blazor applications. It provides a convenient API for storing, retrieving, and managing data in local storage.

By abstracting away the complexities of directly interacting with the localStorage API, this package provides an intuitive and type-safe interface. It lets you focus on building feature-rich Blazor applications without worrying about the underlying storage mechanisms.

Introducing Blazored.LocalStorage

Blazored.LocalStorage is an open-source library designed to provide easy and accessible local storage management in Blazor applications. This library is compatible with both Blazor WebAssembly and Blazor Server projects. This makes it a versatile choice for Blazor developers looking to enhance their applications with persistent, client-side storage capabilities.

At its core, Blazored.LocalStorage facilitates the storage and retrieval of data in the browser's local storage, allowing data to persist across browser sessions.

This is particularly useful for storing user preferences, application state, and other data that needs to persist between page reloads without the need for a database or backend storage solution.

Advantages of Using Blazored.LocalStorage in Blazor Applications

The inclusion of Blazored.LocalStorage in Blazor applications comes with a host of benefits, including:

• Simplified State Management: By leveraging local storage, applications can maintain state more effectively across user sessions, enhancing the user experience.
• Performance Improvements: Storing data locally reduces the need for frequent server requests, leading to faster application performance and reduced server load.
• Enhanced User Experience: Preferences and application states can be preserved, meaning users do not need to reconfigure settings or lose their place in the application upon returning.
• Easy Integration: The API provided by Blazored.LocalStorage is designed to be intuitive and straightforward, ensuring that developers can integrate local storage capabilities into their applications with minimal effort.
• Cross-Session Persistence: Unlike session storage or in-memory data storage, local storage ensures that data persists across browser sessions and tab closures, providing a more consistent user experience.

How to Install Blazored.LocalStorage

Integrating Blazored.LocalStorage into your Blazor project is straightforward, with support for installation via the NuGet Package Manager or the .NET CLI (Command Line Interpreter).

Install Using the NuGet Package Manager

Using Visual Studio, you can easily add Blazored.LocalStorage by following these steps:

• Open your Blazor project in Visual Studio.
• Navigate to the “Solution Explorer”, right-click on "Dependencies", and select “Manage NuGet Packages”.

• In the NuGet Package Manager, click on the “Browse” tab and search for “Blazored.LocalStorage”.

• Find the package in the list, select it, and click “Install”.

Visual Studio will handle the rest, adding the package to your project along with any dependencies.

Install Using the .NET CLI

For those who prefer using the command line or are working within a development environment other than Visual Studio, the .NET CLI provides a simple method to add Blazored.LocalStorage:

dotnet add package Blazored.LocalStorage

Run the command above in your terminal or command prompt from the root directory of your Blazor project. The CLI will download and install Blazored.LocalStorage along with any necessary dependencies.

How to Use Blazored.LocalStorage

Let's dive into some basic examples of using Blazored.LocalStorage in a Blazor application.

How to Register Blazored.LocalStorage in your Blazor Application

We will registerBlazored.LocalStorage into the root of the application, so that it will be available to use everywhere in the application.

In the program.cs file, which is our root file, we will register the Blazored.LocalStorage service by doing the following:

builder.Services.AddBlazoredLocalStorage();

The code snippet above registers the Blazored.LocalStorage into the application. For this to work, make sure you add the code below to the top of the program.cs file:

using Blazored.LocalStorage;

The code snippet above makes sure that the Blazored.LocalStorage is being imported to be used in the file. If you've added everything correctly, your program.cs file should look like this:

using BlazorApp9.Components;
using Blazored.LocalStorage;

namespace BlazorApp9;

public class Program
{
    public static void Main(string[] args)
    {
        var builder = WebApplication.CreateBuilder(args);

        builder.Services.AddRazorComponents()
            .AddInteractiveServerComponents();

        builder.Services.AddBlazoredLocalStorage();

        var app = builder.Build();

        if (!app.Environment.IsDevelopment())
        {
            app.UseExceptionHandler("/Error");
            app.UseHsts();
        }

        app.UseHttpsRedirection();

        app.UseStaticFiles();
        app.UseAntiforgery();

        app.MapRazorComponents<App>()
            .AddInteractiveServerRenderMode();

        app.Run();
    }
}

The above is the full code that should be in your program.cs file. With this, you can now use Blazored.LocalStorage anywhere in the application to store and receive data.

How to Store and Retrieve Data in Blazored.LocalStorage

Let's consider a simple scenario where we want to store and retrieve a piece of data using local storage. We'll create a Blazor page with two buttons: one to store data and another to retrieve it.

@page "/"

@inject Blazored.LocalStorage.ILocalStorageService localStorage
@rendermode RenderMode.InteractiveServer

<h3>Local Storage Example</h3>

<input @bind-value="@inputData" />

<button @onclick="StoreData">Store Data</button>
<button @onclick="RetrieveData">Retrieve Data</button>

<p>The retrieved data from the LocalStorage: @storedData </p>

@code {
    private const string dataKey = "localStorageKey";

    private string? storedData;
    private string? inputData;

    private async Task StoreData()
    {
        if(!string.IsNullOrWhiteSpace(inputData))
        {
            await localStorage.SetItemAsync(dataKey, inputData);
            inputData = "";
        }
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await RetrieveData();
        }
    }

    private async Task RetrieveData()
    {
        storedData = await localStorage.GetItemAsync<string>(dataKey);
    }
}

In the code snippet above, the @inject Blazored.LocalStorage.ILocalStorageService localStorage injects the local storage service to interact with the browser's local storage. The @rendermode RenderMode.InteractiveServer specifies that the page should be rendered as an interactive server-side component. Without the interactive server, the page will not be interactive.

The input field binds to inputData using the @bind-value attribute, allowing users to enter data they wish to store. The dataKey is a constant variable used to store and retrieve data from local storage. The storedData and inputData variables are used to hold the data to be stored and retrieved.

The StoreData method checks to see if inputData is not empty. If not, it stores it in local storage using dataKey, and clears the input field.

OnAfterRenderAsync is triggered after the component's first render. It retrieves data from local storage to ensure that data persists even after the page is reloaded.

RetrieveData retrieves data from local storage and assigns it to storedData for display.

The video above explains how to store and retrieve data stored in localstorage on the client-side.

Advanced Features and Techniques

In this section, we'll talk about how you can set an expiration date on your data, and how the stored data can be encrypted and decrypted for security.

How to Manage the Expiration of Stored Data

To manage the expiration of your stored data, you will create a helper class that stores data along with an expiration timestamp. Create a file called StorageItem.cs which will contain the code below:

public class StorageItem<T>
{
    public required T Data { get; set; }
    public DateTime Expiry { get; set; }
}

The code snippet above is a StorageItem<T> class, which is a generic class that can hold data of any type T and an expiry date DateTime. The Data property is required to be set when an instance of StorageItem is created or initialized, ensuring that it always has a valid value. The Expiry property represents the expiration date of the stored data.

Next, you'll create a file which will be a class that contains methods to set and get from the LocalStorage, with an expiration time. Create a file called LocalStorageHelper.cs:

using Blazored.LocalStorage;

namespace BlazorApp9.Components.Helpers;

public static class LocalStorageHelper
{
    public static async Task SetItemAsyncWithExpiry<T>(ILocalStorageService localStorageService, string key, TimeSpan expiry, T data)
    {
        StorageItem<T> storageItem = new StorageItem<T>
        {
            Data = data,
            Expiry = DateTime.UtcNow.Add(expiry)
        };

        await localStorageService.SetItemAsync(key, storageItem);
    }

    public static async Task<T?> GetItemAsyncWithExpiry<T>(ILocalStorageService localStorageService, string key)
    {
         var storageItem = await localStorageService.GetItemAsync<StorageItem<T>>(key);

        if(storageItem is null) {
            return default;
        }

        if (storageItem.Expiry < DateTime.UtcNow)
        {
            await localStorageService.RemoveItemAsync(key);
            return default;
        }
        return storageItem.Data;
    }
}

In the code above, you can see the necessary using directive for the Blazored.LocalStorage library. It provides easy access to the browser's local storage from Blazor applications.

This is followed by the declaration of the namespace BlazorApp9.Components.Helpers. This organizes the code and indicates that this helper is part of a specific component's helpers within the Blazor application.

Next, the LocalStorageHelper class is defined as a static class. A static class is one that cannot be instantiated and can only contain static members (using non static methods or properties will not be accepted).

Within the LocalStorageHelper class, two static asynchronous methods are defined: SetItemAsyncWithExpiry and GetItemAsyncWithExpiry.

The SetItemAsyncWithExpiry method is responsible for storing an item in the local storage with an associated expiry time. It accepts an ILocalStorageService instance for interacting with local storage, a key string to identify the stored item, a TimeSpan value representing the expiry duration, and the actual data to be stored.

Inside the method, a StorageItem<T> object is created, where T is the type of data being stored. This object includes the data and the expiry time, which is calculated by adding the specified TimeSpan to the current UTC time.

This StorageItem object is then serialized and saved in local storage under the given key using the SetItemAsync method of ILocalStorageService.

The GetItemAsyncWithExpiry method is responsible for retrieving an item from local storage and checking if it has expired. It also accepts an ILocalStorageService instance and a key string.

This method attempts to retrieve the stored StorageItem<T> object using the key. If the retrieved item is null, it returns the default value for the type T (typically null for reference types and zero or equivalent for value types).

If the item is found but its expiry time is earlier than the current UTC time, it means the item has expired. In this case, the item is removed from the local storage using the RemoveItemAsync method of ILocalStorageService, and the method returns the default value for T. If the item is valid and has not expired, the method returns the stored data.

How to Implement Encryption and Decryption

In this section, we will explore a utility file that provides encryption and decryption functionalities for a Blazor application.

The EncryptionHelper.cs class includes methods for encrypting and decrypting strings, as well as methods for serializing objects to JSON (Javascript Object Notation) and then encrypting them. This ensures that sensitive data can be securely stored and transmitted.

Let’s dive into the code to understand how these methods work and how you can use them. Add the following code for this file:

using System.Security.Cryptography;
using System.Text;
using System.Text.Json;

namespace BlazorApp9.Components.Helpers;

public static class EncryptionHelper
{
    private static readonly string EncryptionKey = "your-encryption-key";

    private static byte[] GetKeyBytes(string key)
    {

        byte[] keyBytes = Encoding.UTF8.GetBytes(key);
        Array.Resize(ref keyBytes, 32);
        return keyBytes;
    }

    public static string Encrypt(string plainText)
    {
        byte[] iv = new byte[16];
        byte[] array;

        using (Aes aes = Aes.Create())
        {
            aes.Key = GetKeyBytes(EncryptionKey);
            aes.IV = iv;

            ICryptoTransform encryptor = aes.CreateEncryptor(aes.Key, aes.IV);

            using (MemoryStream memoryStream = new MemoryStream())
            {
                using (CryptoStream cryptoStream = new CryptoStream((Stream)memoryStream, encryptor, CryptoStreamMode.Write))
                {
                    using (StreamWriter streamWriter = new StreamWriter((Stream)cryptoStream))
                    {
                        streamWriter.Write(plainText);
                    }

                    array = memoryStream.ToArray();
                }
            }
        }

        return Convert.ToBase64String(array);
    }

    public static string Decrypt(string cipherText)
    {
        byte[] iv = new byte[16];
        byte[] buffer = Convert.FromBase64String(cipherText);

        using (Aes aes = Aes.Create())
        {
            aes.Key = GetKeyBytes(EncryptionKey);
            aes.IV = iv;

            ICryptoTransform decryptor = aes.CreateDecryptor(aes.Key, aes.IV);

            using (MemoryStream memoryStream = new MemoryStream(buffer))
            {
                using (CryptoStream cryptoStream = new CryptoStream((Stream)memoryStream, decryptor, CryptoStreamMode.Read))
                {
                    using (StreamReader streamReader = new StreamReader((Stream)cryptoStream))
                    {
                        return streamReader.ReadToEnd();
                    }
                }
            }
        }
    }

    public static string SerializeAndEncrypt<T>(T data)
    {
        var jsonString = JsonSerializer.Serialize(data);
        return Encrypt(jsonString);
    }

    public static T DecryptAndDeserialize<T>(string cipherText)
    {
        var json = Decrypt(cipherText);
        return JsonSerializer.Deserialize<T>(json);
    }
}

The EncryptionHelper class is a static helper class designed for encrypting and decrypting data. This is particularly useful for securing sensitive information in a Blazor application.

The class above defines a static readonly field EncryptionKey which holds the encryption key. This key is crucial for both the encryption and decryption processes. It's important to use a strong and securely stored key.

The GetKeyBytes method converts the string key into a byte array and ensures its length is 32 bytes. This is because the AES encryption algorithm requires a 256-bit key, which is 32 bytes long.

The Encrypt method encrypts a plaintext string using AES encryption. It first creates an initialization vector (IV) of 16 bytes, which is required by the AES algorithm. The method then sets up an AES object with the encryption key and IV, and uses a CryptoStream to write the encrypted data to a memory stream. This encrypted data is then converted to a base64 string for easy storage and transmission.

The Decrypt method performs the reverse operation. It converts a base64 string back to a byte array, sets up the AES object with the same key and IV, and uses a CryptoStream to read the decrypted data from the memory stream. The result is the original plaintext string.

The EncryptionHelper class provides two methods for handling complex data structures: SerializeAndEncrypt and DecryptAndDeserialize. The SerializeAndEncrypt method first serializes an object to a JSON string using JsonSerializer.Serialize, and then encrypts this JSON string using the Encrypt method. This allows complex objects to be securely stored in an encrypted format.

The DecryptAndDeserialize method decrypts an encrypted JSON string back into its original form and then deserializes it into an object of type T using JsonSerializer.Deserialize. This combination of decryption and deserialization ensures that complex data can be securely retrieved and used within the application.

How to Connect the Expiration and Encryption to the User Interface

Now we'll walk through a Blazor component (Home.razor) that allows users to store and retrieve encrypted data in the browser's local storage. This ensures that sensitive information is protected and automatically expires when no longer needed.

This approach combines the ease of local storage with the security of encryption, providing a robust solution for managing user data in web applications. Let's dive into the code to see how it works.

 @page "/"
@using BlazorApp9.Components.Helpers

@inject Blazored.LocalStorage.ILocalStorageService localStorage
@rendermode RenderMode.InteractiveServer

<h3>Local Storage Example</h3>

<input @bind-value="@inputData" />

<button @onclick="StoreData">Store Data</button>
<button @onclick="RetrieveData">Retrieve Data</button>

<p>The retrieved data from the LocalStorage: @storedData </p>

@code {
    private const string dataKey = "localStorageKey";

    private string? storedData;
    private string? inputData;

    bool isDataLoaded = false;

    private async Task StoreData()
    {
        if (!string.IsNullOrWhiteSpace(inputData))
        {
            string encryptData = EncryptionHelper.SerializeAndEncrypt(inputData);
            await LocalStorageHelper.SetItemAsyncWithExpiry(localStorage, dataKey, TimeSpan.FromMinutes(30), encryptData);
            inputData = "";
        }
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender && !isDataLoaded)
        {
            await RetrieveData();
            isDataLoaded = true;
            StateHasChanged();
        }
    }

    private async Task RetrieveData()
    {
        string encryptData = await LocalStorageHelper.GetItemAsyncWithExpiry<string>(localStorage, dataKey);
        storedData = encryptData != null ? EncryptionHelper.DecryptAndDeserialize<string>(encryptData) : "Data not found or expired.";
    }
}

In the code above, the StoreData method checks if inputData is valid, encrypts it using EncryptionHelper.SerializeAndEncrypt, and stores it in local storage with a thirty-minute expiry using LocalStorageHelper.SetItemAsyncWithExpiry. The input field is then cleared.

The OnAfterRenderAsync method retrieves data from local storage after the component's initial render. This ensures previously stored data is loaded when the page first displays. It runs once, setting isDataLoaded to true and calling StateHasChanged to update the user interface (UI).

The RetrieveData method fetches data from local storage using LocalStorageHelper.GetItemAsyncWithExpiry. If the data is found and valid, it decrypts and deserializes it using EncryptionHelper.DecryptAndDeserialize. If not, it sets storedData to "Data not found or expired."

The video above demonstrates how you can implement the concepts discussed in this guide in a web application.

Conclusion

Blazored.LocalStorage offers a powerful and easy-to-use solution for managing user information in Blazor applications. Its integration brings numerous benefits, including enhanced state management, improved performance, and a better user experience.

After reading through this article and trying out the code for yourself, you should be able to incorporate local storage capabilities into any Blazor project. This will help you unlock the full potential of client-side storage in your web applications.

When building mobile applications, one common requirement is the ability to save data locally on the device. This is when local storage comes into play. Async Storage, provided by React Native Expo, is a simple but powerful solution for saving data locally within your React Native Expo apps.

In this tutorial, we'll discuss the fundamentals of local storage, introduce Async Storage, and demonstrate how to properly integrate it into React Native Expo projects.

Table of Contents

• Prerequisites
• What is Local Storage?
• What is Async Storage?
• How to Get Started with Async Storage
• Understanding Async Storage Methods
• Advanced Usage and Best Practices
• Conclusion

Prerequisites

• Familiarity with React Native and JavaScript.
• Node.js and npm (or yarn) installed.

What is Local Storage?

Local storage is an essential component of mobile app development, allowing developers to store data on the user's device. Unlike other storage choices such as databases, Local Storage uses a straightforward key-value pair storage technique.

Developers can use it to save small quantities of data that remain stored even when they close the program or restart the device. This makes it excellent for storing user preferences, authentication tokens, and other important information.

Local storage is essential for boosting app speed because it eliminates the need to retrieve data from faraway servers regularly.

What is Async Storage?

Async Storage is a key-value storage system supplied by React Native Expo that allows you to manage local storage in mobile apps. It provides a simple key-value storage system that enables developers to store and retrieve data asynchronously.

Unlike synchronous storage methods, Async Storage allows you to save and retrieve data without interrupting the main thread, resulting in a more seamless user experience.

How to Get Started with Async Storage

To use Async Storage in your React Native Expo project, ensure that Expo is installed. If you haven't already set up a React Native Expo project, you can do so by installing Expo CLI:

$ npm install -g expo-cli

Create a new Expo project:

$ expo init MyProject
$ cd MyProject

To add Async Storage to your project, run the following command:

$ expo install @react-native-async-storage/async-storage

The @react-native-async-storage/async-storage is a community-maintained version of AsyncStorage. Once installed, you can then setup a file to handle the AsyncStorage methods such as setItem(), updateItem(), deleteItem(), and others. This file would be imported whenever you want to make a call to the local storage.

In this example, we'll create a folder named utils in the root path of our project and then create the AsyncStorage.js file to handle these methods:

Async Storage File Structure

Within the AsyncStorage.js file, you can define the AsyncStorage methods like this:

// utils/AsyncStorage.js

import AsyncStorage from '@react-native-async-storage/async-storage';

export const setItem = async (key, value) => {
  try {
    await AsyncStorage.setItem(key, JSON.stringify(value));
  } catch (error) {
    console.error('Error setting item:', error);
  }
};

export const getItem = async (key) => {
  try {
    const value = await AsyncStorage.getItem(key);
    return value != null ? JSON.parse(value) : null;
  } catch (error) {
    console.error('Error getting item:', error);
    return null;
  }
};

export const removeItem = async (key) => {
  try {
    await AsyncStorage.removeItem(key);
  } catch (error) {
    console.error('Error removing item:', error);
  }
};

export const mergeItem = async (key, value) => {
  try {
    await AsyncStorage.mergeItem(key, JSON.stringify(value));
  } catch (error) {
    console.error('Error merging item:', error);
  }
};

export const clear = async () => {
  try {
    await AsyncStorage.clear();
  } catch (error) {
    console.error('Error clearing AsyncStorage:', error);
  }
};

export const getAllKeys = async () => {
  try {
    return await AsyncStorage.getAllKeys();
  } catch (error) {
    console.error('Error getting all keys:', error);
    return [];
  }
};

export const getAllItems = async () => {
  try {
    const keys = await AsyncStorage.getAllKeys();
    const items = await AsyncStorage.multiGet(keys);
    return items.reduce((accumulator, [key, value]) => {
      accumulator[key] = JSON.parse(value);
      return accumulator;
    }, {});
  } catch (error) {
    console.error('Error getting all items:', error);
    return {};
  }
};

Moving forward, In the next section, we'll explain and break down the meaning of these AsyncStorage functions in the AsyncStorage.js file.

Understanding Async Storage Methods

By separating AsyncStorage functions into their own file, you can conveniently manage and reuse them throughout your React Native Expo project. This modular approach improves code maintenance and readability.

In the previous section, we created the AsyncStorage.js file and added several functions.

In the following sections, we'll talk about these methods and how to use them effectively.

setItem()

This method is essential for storing data locally on the device. It allows developers to store key-value pairs in AsyncStorage, where the key serves as a unique identifier and the value represents the data to be stored.

await AsyncStorage.setItem('username', 'freeCodeCamp');

getItem()

The getItem() method returns the value associated with a given key from local storage. It sends a parameter/key, which is the unique identification of the data being requested. And it returns the value associated with the supplied key, or null if no value is discovered for the given key.

const username = await AsyncStorage.getItem('username');

In this scenario, the value for the key username is fetched from local storage. This obtained value, freeCodeCamp, is then placed in the variable username, making it available for further use across the application.

removeItem()

This function deletes the object with the supplied key from local storage. It's useful when you want to remove a specific piece of data that's no longer required.

await AsyncStorage.removeItem('username');

In this example, the object identified by the key username is removed from local storage.

mergeItem()

The mergeItem() method combines the value of an existing key with the value supplied as input. If the key do not exists, it works similarly to setItem(), creating a new key-value pair.

await AsyncStorage.mergeItem('user', JSON.stringify({ name: 'John' }));

clear()

The clear() method deletes all items from local storage. It's useful when you wish to delete all local data, such as when you log out of a user or reset the application state.

await AsyncStorage.clear();

getAllKeys()

The getAllKeys() function returns all keys kept in local storage. It's useful when you need to loop through all keys or conduct operations based on the keys in local storage.

const keys = await AsyncStorage.getAllKeys();

multiGet()

The multiGet() function obtains several key-value pairs from local storage using an array of keys provided.

const data = await AsyncStorage.multiGet(['username', 'email']);

In this example, the values for the keys username and email are fetched from local storage.

Advanced Usage and Best Practices

While AsyncStorage provides a straightforward interface for local storage, there are several best practices to consider:

1. Data Serialization: When storing complex data types such as objects or arrays, remember to serialize them into a string format using JSON.stringify() before storing and deserialize them using JSON.parse() when retrieving.
2. Error Handling: Implement robust error handling to gracefully handle any failures that may occur during Async Storage operations.
3. Security Considerations: Be mindful of the sensitivity of the data being stored locally and implement appropriate security measures such as encryption for sensitive information.

Conclusion

In conclusion, using local storage into your React Native Expo projects is essential for developing robust and responsive mobile applications. Async Storage simplifies the process of storing and retrieving data on the device, providing a consistent user experience and enabling offline functionalities.

By following the steps provided in this article, you can utilize Async Storage to improve your apps local storage functionality.

Remember, if you have any questions or just want to say hi, feel free to reach me on X(Twitter) or my website. :)

In this article, you will learn what local storage is and how to use it in modern web applications. You will also learn the advantages of using local storage, as well as some of its limitations.

Table of Contents

• What is Local Storage?

• Differences Between Local Storage and Session Storage

• How to Use Local Storage

• A Practical Example

• How to View Local Storage in DevTools

• Benefits of Using Local Storage

• Limitations of Local Storage

• Conclusion

What is Local Storage?

Local storage is a feature in web browsers that allows developers to save data in the user’s browser. It’s part of the web storage API, together with session storage.

Local storage works by accepting data in key-value pairs. It retains the data even when the user refreshes the page or closes the tab or browser.

Differences Between Local Storage and Session Storage

As I mentioned earlier, the web storage API in modern browsers provides two main features for data storage. These are local storage and session storage.

The key differences between the two are the lifespan of the stored data and their scope.

Data in local storage remains available even when the tab/browser is closed. But closing the tab/browser clears any data stored in session storage.

Also, data in local storage is accessible across multiple browser tabs and windows. On the other hand, data in session storage is only accessible within specific browser tabs and is not shared.

How to Use Local Storage

The local storage object provides different methods you can use to interact with it. With these methods, you can add, read, and delete data from local storage.

How to Store Data in Local Storage

To store data in local storage, you use the setItem() method. This method takes in two arguments, a key and a value.

localStorage.setItem(key, value)

If the key does not exist in local storage, the setItem() method will create a new key and assign the given value to it. But if a key with the same name exists in local storage, it will update the value of the key with the provided value.

How to Read Data From Local Storage

To retrieve and use data from local storage, you use the getItem() method. This method takes in a key as an argument.

localStorage.getItem(key)

If the given key exists in local storage, the method returns the value of that key. If it doesn’t, the method returns null.

How to Store and Read Complex Data Values in Local Storage

Local storage can only store strings. This means if you need to store values like objects or arrays, you first need to get a string representation of the value. You do this using the JSON.stringify() method.

Example:

const userObj = {
  username = "Maria",
  email: "maria@mail.com"
}

localStorage.setItem('user', JSON.stringify(userObj))

The JSON.stringify() method converts the userObj object into a string representation before sending it to local storage.

Now, when you want to retrieve the data back from local storage, you also need to change it from its string representation back to the original form. And you do that using the JSON.parse() method.

Example:

const storedUserData = localStorage.getItem('user')

if (storedUserData) {
  const userData = JSON.parse(storedUserData)
  // You can use userData here...
} else {
  console.log('User data not found in local storage')
}

In the example above, we first check if there is data for ‘user’ in local storage before using the JSON.parse() method. This is important because if it does not exist in local storage, JSON.parse() will be applied to a null value (which will result in an error).

How to Delete Data from Local Storage

There are two methods available for deleting data from local storage. One is the removeItem() method and the other is the clear() method.

You use the removeItem() method when you want to delete a single item from local storage. The method takes in a key as an argument and deletes the corresponding key-value pair from local storage.

localStorage.removeItem(key)

But what if, instead of deleting a single key-value pair, you want to clear all data from the local storage? Well, local storage has a method for that - the clear() method.

localStorage.clear()

The clear() method deletes all key-value pairs in the local storage for the current domain.

How to Get the Name of a Key in Local Storage

If you want to get the name of a key at a particular index in local storage, you can use the key() method. It takes in a number as an argument and returns the name of the key at that specified index.

Example:

localStorage.key(0)

The example above will return the name of the key at index 0. If there is no key at the specified index, the method will return null.

A Practical Example

The following shows a practical demo of the difference between local storage and session storage.

In this example, we'll save the user's name in local storage and save the age in session storage.

<!-- HTML --> 
<body>

  <h1 class="userName"></h1>
  <h2 class="userAge"></h2>

  <input type="text" class="name" placeholder="Enter name here"/>
  <button class="saveNameBtn">Save Name</button>

  <br />

  <input type="text" class="age" placeholder="Enter age here"/>
  <button class="saveAgeBtn">Save Age</button>

</body>

The markup includes two header elements. One for userName and the other for userAge. It also includes two input elements for name and age. Each input has an associated button we'll use for saving the data.

Now, let's use the querySelector method to select the various elements.

const userNameText = document.querySelector(".userName")
const userAgeText = document.querySelector(".userAge")

const saveNameButton = document.querySelector(".saveNameBtn")
const saveAgeButton = document.querySelector(".saveAgeBtn")

Code Example for Local Storage

saveNameButton.addEventListener("click", () => {
  const userName = document.querySelector(".name").value
  userNameText.textContent = userName
  localStorage.setItem("name", userName)
})

First, we get the value of the name input, set it as the textContent of userNameText. And then use the setItem() of local storage to save the userName value in local storage.

Next, let's see how we can get the name value from local storage when we need it.

function displayUserName () {
  const nameFromLocalStorage = localStorage.getItem("name")

  if (nameFromLocalStorage) {
    userNameText.textContent = nameFromLocalStorage
  } else {
    userNameText.textContent = "No name data in local storage"
  }
}

displayUserName()

The displayUserName function gets nameFromLocalStorage using the getItem() method. If the value exists in local storage, we set it as the textContent of the userNameText element. If it's null or doesn't exist, then we set textContent to the string "No name data in local storage".

Code Example for Session Storage

Now, let's do the same thing for the age value. The only difference here will be using session storage instead of local storage.

saveAgeButton.addEventListener("click", () => {
  const userAge = document.querySelector(".age").value
  userAgeText.textContent = userAge
  sessionStorage.setItem("age", userAge)
})

function displayUserAge () {
  const ageFromSessionStorage = sessionStorage.getItem("age")

  if (ageFromSessionStorage) {
    userAgeText.textContent = ageFromSessionStorage
  } else {
    userAgeText.textContent = "No age data in session storage"
  }
}

displayUserAge()

The setItem and getItem methods also works for session storage.

Demo:

Local storage and session storage demo.

As you can see from the demo above, when you close and reopen the page, the name data from local storage persists. But the age data from session storage is cleared once the page closes.

Try your hands on the code sample on StackBlitz

How to View Local Storage in DevTools

You can follow the steps below to inspect the contents of local storage in your browser's developer tools.

First, open DevTools. You can do that by right clicking on the web page and selecting "Inspect".

Demo of how to open the DevTools.

Then, select the "Application" tab on the DevTools panel. Depending on your browser, this panel may have a different name. For example, it's called "Storage" in Safari and Firefox.

Demo of how to open the "Application" panel in DevTools.

Locate the "Storage" section on the sidebar showing a list of the various web storage options.

Click on "Local Storage" to expand and view its contents.

Demo of how to open the local storage tab in the storage panel.

You can click on individual items to view the corresponding key-value pair.

Benefits of Using Local Storage

The following are some of the benefits local storage has over other storage mechanisms in modern web development.

1. Persistent data: When you use local storage, the stored data remains even when the user closes the tab or the browser. This is useful for saving user preferences, settings, and other relevant data. It can help create a seamless user experience.

2. Offline access: You can use local storage as a means to cache data which can be accessed even with limited or no internet. This makes it a useful feature for apps that rely on caching data for offline use like news readers, productivity apps, and so on.

3. More storage capacity: Compared to other storage means, local storage has a relatively high capacity. For example, cookies are limited to 4 kilobytes per domain. But local storage can store up to 5 megabytes of data per domain.

Limitations of Using Local Storage

1. Stores only strings: As you learned earlier, local storage can only store string values. You can use the JSON stringify and parse methods to work around it. But some web developers may not prefer it as it can lead to writing complex code that’s difficult to debug.

2. Security concerns: Data in the local storage can be prone to attacks like cross-site scripting (XSS). As such, you should be cautious when working with sensitive information. It’s advisable to assess security implications and consider other alternatives where necessary.

3. Not accessible to web workers: Local storage is part of the Window object. As such, it’s tied to the main execution thread of the web page. This means it's not accessible to web workers. So if you run any background processes, you cannot use local storage within the web worker scripts.

Conclusion

Local storage is a feature in modern web browsers that makes it easy for web developers to store and persist data between browser sessions.

Compared to traditional cookies, it provides larger storage capacities. Also, unlike cookies, it does not rely on server-side processes. This reduces the need for frequent server requests and helps improve performance.

In this article, you learn about how to use local storage. We covered saving, retrieving, and deleting data from local storage. You also learned about some of the benefits of using local storage in your project, and some of its limitations too.

Thanks for reading. And happy coding! For more in-depth tutorials, feel free to subscribe to my YouTube channel.

In this article, you'll learn what is a web storage, the different types of web storage, and when to use each one of them.

What is Web Storage?

Web storage is an HTML5 feature that allows you to store data in key value pairs in the browser. This enables applications to store data in the client side so you can access it or manipulate it later. All data stored in web storage stays in the browser and is not transferred anywhere else.

Types of web storage

The two main types of web storage are‌‌ local storage‌‌ and session storage‌‌. Each one has its own unique characteristics.

But one thing they have in common is that they store the data in the particular browser the user uses to access the webpage. You won't be able to access the same data through another browser.

Now let's discuss both of them in detail.

Local Storage

Local storage can store 5MB of data per app for the lifetime of the app. Closing the browser will not affect the data in any way – it stays there unless you delete it.

You can only access the local storage object through localStorage. The methods you can use to perform operations on the localStorage object are:

localStorage // to access the localStorage object 
localStorage.setItem('name', 'John') // sets name equal to john localStorage.getItem('name') // "John" 
localStorage.removeItem('name') // removes name from the localStorage localStorage.clear() // clears the localStorage

localStorage.setItem() takes a key and value as parameters and sets a new item in the local storage object equal to the given key value pair.

localStorage.getItem() takes a key as a parameter and returns the value stored to that key in the storage.

localStorage.clear() clears the whole localStorage object.

localStorage.removeItem() takes in a key as a parameter and removes the corresponding key-value pair. ‌‌

Any item that you store in localStorage will be stored as a string. This means that you need to convert other data types such as arrays or objects to strings – otherwise you lose their structure.

See the example below:

const scores = [10, 8, 6, 3, 9] 
const scoresJSON = JSON.stringify(scores) 
localStorage.setItem('scores', scoresJSON) 
localStorage // output >> {scores: '[10, 8, 6, 3, 9]', length: 1}

In the example above, we first created an array score, then converted it into a string using JSON.stringify(), and finally saved the stringified scores array in localStorage.

Take your time to have a look at the output I get when I run the same code snippet in my browser console.

Example code in browser console

Note that the key scores has a value equal to our stringified scores array. But if we don't convert the scores array into a string, our array will loose it's structure and the items will be saved as a string like below:

const scores = [10, 8, 6, 3, 9] 
localStorage.setItem('scores', scores) 
localStorage // output >> {scores: '10, 8, 6, 3, 9', length: 1}

Let's also run the code in the browser console to see what is logs to the console:

Saving an array without converting it into a string

See how our scores array is converted into a string when we do not convert it into a string using JSON.stringify()?

Session Storage

Session storage allows you to store data in the browser depending on the system memory and the data stored in the browser until the browser is closed. In other words, closing the browser will clear all the data stored in session storage.

Like localStorage, you can access session storage by typing sessionStorage in the browser console.

sessionStorage // access the session storage 
sessionStorage.setItem('name', 'John') // add name to session storage with value john 
sessionStorage.getItem('name') // get the name item from session storage sessionStorage.removeItem('name') // remove name item from the session storage sessionStorage.clear() // clear the session storage

sessionStorage.setItem() takes a key and value as parameters and sets a new item in the local storage object equal to the given key value pair.

sessionStorage.getItem() takes key as a parameter and returns the value stored to that key in the storage.

sessionStorage.removeItem() takes in a key as parameter and removes the corresponding key-value pair.

sessionStorage.clear() clears the whole localStorage object. ‌‌

Like localStorage, any item stored in sessionStorage will be stored as a string. This means we need to convert them into strings before storing in the sessionStorage.

Web Storage Example Use Cases

You can use local storage when you want your data to be made available when the user revisits the web page, such as for a shopping cart or game/quiz score. Just keep in mind that the information saved in local storage should not be sensitive.‌‌

You can use session storage when the data that needs to be saved is sensitive. User authentication is an example of data that you would like to clear as soon as the user closes the tab.

Conclusion

In this article, you have learned the modern ways of storing temporary data in the browser. I hope this has helped you understand how and when to use both types of web storage in your projects.

Interested in connecting on LinkedIn? Hit me up at Tooba Jamal.

This means the data survives page refreshes (sessionStorage) and even browser restarts. This indicates that the data stored in the browser will remain even when the browser window is closed.

In basic terms, local storage enables developers to store and retrieve data in the browser.

It is critical to understand, though, that using localStorage as a database for your project is not a good practice, since data will be lost when the user clears the cache, among other things.

Developers frequently use localStorage for adding a dark mode feature to an application, saving a to-do item, or persisting a user's form input values, among many other scenarios.

In this post, we'll take a look at how to use localStorage with React hooks to set and get items easily.

Here's an interactive scrim about how to use localStorage with React Hooks to set and get items:

What are React Hooks?

React Hooks are JavaScript functions that you may import from the React package to add capabilities to your components.

Hooks allow React developers to use state and lifecycle methods within functional components. They also operate with existing code, making them easily adoptable into a codebase.

We will need two hooks in order to use localStorage with react hooks:

• useState() – The state of your application is guaranteed to change at some time. The useState() hook is a function that accepts one parameter, the initial state (which might be the value of a variable, an object, or any other sort of data in your component), and returns two values: the current state and a function that can be used to update the state.

• useEffect() – The Effect Hook is activated by default after the first render and each time the state is changed. As the names suggest, it is used to perform an effect each time the state changes. This hook is great for configuring listeners, retrieving data from the API, and deleting listeners before the component is removed from the DOM.

How to Implement localStorage in React

localStorage provides us with access to a browser's storage object, which includes five methods:

• setItem(): This method is used to add a key and a value to localStorage.

• getItem(): This method is used to get an item from localStorage using the key.

• removeItem(): This technique is used to delete an item from localStorage based on its key.

• clear(): This technique is used to delete all instances of localStorage.

• key(): When you supply a number, it aids in the retrieval of a localStorage key.

In this post, we will only consider the most popular methods, which are the first two methods.

How to Use the setItem() Method

By giving values to a key, this technique is used to store objects in localStorage. This value can be of any datatype, including text, integer, object, array, and so on.

It is vital to remember that in order to store data in localStorage, you must first stringify it with the JSON.stringify() function.

const [items, setItems] = useState([]);

useEffect(() => {
  localStorage.setItem('items', JSON.stringify(items));
}, [items]);

In the above code, we first created a state and assigned it an empty array (yours could be any other datatype). Second, we used useEffect() to add objects to localStorage whenever the value of our state changed. We did this by passing the state as the second argument.

Basically, this is the major code responsible for adding key-value pairs to localStorage:

localStorage.setItem('items', JSON.stringify(items));

Simply put, the preceding code names the key (items) and then assigns a value to it, but we had to first ensure that the data we were adding was a JSON string.

We use JSON.stringify() to convert a JSON object to JSON text stored in a string, which can then be transmitted to the web server.

Structure of how hooks works with localstorage to set items

How to Use the getItem() Method

This method retrieves objects from localStorage. There are other methods to accomplish this with React, but we will use the useEffect() hook because it is the best one.

The useEffect() hook helps us fetch all items on first render, which means that when the component mounts or re-renders, it obtains all of our data from localStorage.

Note that this is why we passed in an empty second argument.

const [items, setItems] = useState([]);

useEffect(() => {
  const items = JSON.parse(localStorage.getItem('items'));
  if (items) {
   setItems(items);
  }
}, []);

It is important to remember that when we stored the data, we first converted it to a JSON string. This means that in order for us to now make use of it, we need to convert JSON string back to a JSON object. We do this with the JSON.parse() method.

Structure of how hooks works with localstorage to get items

Conclusion

In this article, we learnt how to use localStorage with React hooks, when to use it, and which hook to use.

If you want to see how this works in practice, you can get the source code for a simple to-do list app that makes use of localStorage and these hooks here.

You can learn more about state and props in this detailed article written by me. You can also check all articles written by me in this content repository.

If you run a quick Google search for persisting a logged-in user in React (or keeping a user logged in in React), you don't get a lot of straightforward results. There aren't really any easy to follow examples on how to achieve this. So I decided I had to write that simple guide.

You may have done a search on this and saw the word localStorage being thrown around. Yes, we'll be using localStorage but I'm going to show you exactly how it's done.

Some notes on localStorage.

1. localStorage is the browser's database. The data is stored inside your browser in your computer's memory.
2. localStorage is specific to an origin. In other words, the localStorage for one website cannot be accessed by another.

Initial setup

Let's get started. I've deployed a simple express server to Heroku for use in testing this application.

1. Create a new React application and head into the <App /> component.
2. Install axios using npm install axios and import it inside <App />
3. Next, create a simple login form that accepts a username and password.

import React, { useState } from "react";
import axios from "axios";

const App = () => {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [user, setUser] = useState()

  const handleSubmit = async e => {

  };

// if there's a user show the message below
  if (user) {
    return <div>{user.name} is loggged in</div>;
  }

  // if there's no user, show the login form
  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="username">Username: </label>
      <input
        type="text"
        value={username}
        placeholder="enter a username"
        onChange={({ target }) => setUsername(target.value)}
      />
      <div>
        <label htmlFor="password">password: </label>
        <input
          type="password"
          value={password}
          placeholder="enter a password"
          onChange={({ target }) => setPassword(target.value)}
        />
      </div>
      <button type="submit">Login</button>
    </form>
  );
};

export default App;

As you can see, we've defined an asynchronous handleSubmit function to process the login request. We've also defined a conditional that displays a user.name is logged in message if we have a user, and the login form if we do not have a user.

Next, let's complete the function. This function will work in the following steps:

1. Send the login details to the server.
2. If the request is successful (async-await), store the user information in localStorage and set the State of the User.

Handle the login event

Let's define the handleSubmit event handler.

  const handleSubmit = async e => {
    e.preventDefault();
    const user = { username, password };
    // send the username and password to the server
    const response = await axios.post(
      "http://blogservice.herokuapp.com/api/login",
      user
    );
    // set the state of the user
    setUser(response.data)
    // store the user in localStorage
    localStorage.setItem('user', response.data)
    console.log(response.data)
  };

Note: Use a tryCatch block to handle errors in async functions.

Now that our function is done, you can run npm start to test out your app. Login with the username: user2, password: password.

You should receive the following as a response. The userId, token and username

Check if a user has previously logged in

Next, we want a way to check if there's a user logged in each time the App loads. For that, we use the useEffect hook.

 useEffect(() => {
    const loggedInUser = localStorage.getItem("user");
    if (loggedInUser) {
      const foundUser = JSON.parse(loggedInUser);
      setUser(foundUser);
    }
  }, []);

Remember to use an empty dependency array in your useEffect hook so that it checks if there's a logged in user the first time the app loads.

Now our app should work perfectly. We get the page below after a user has logged in for the first time and their details are stored. If you refresh the page, you'll see that our user stays logged in and the logged in page continues to show.

As a bonus tip, here's how to implement logout.

Implementing Logout functionality

For logging out, we simply empty the user state and remove the user from localStorage.

Let's implement that.

First, we create a logout button

<button onClick={handleLogout}>logout</button>

Then, we create the logout function.

const handleLogout = () => {
    setUser({});
    setUsername("");
    setPassword("");
    localStorage.clear();
  };

And that's it, we're done.

Here's a link to the full gist on GitHub. You can follow me there for more updates.