Use App version detection to selectively wipe localStorage

May 19, 2024

How to use version tracking in a web application to wipe localStorage (reset all local state) on users' devices when an application has been updated and state reset is required.

Table of Contents

Intro
Implementation

Intro

When you're developing a web application, you may find yourself in a situation where you need to reset all of the local state on your users' devices. This could be because you've changed the state structure of your application.

The situation is basically this:

It's very useful to store application state on the client side in localStorage or IndexedDB so that the user can pick up where they left off when they return to your application (or even just reload the page).
However, if you change the structure of your application state, you may need to reset all of the local state on your users' devices to prevent errors or unexpected behavior.

One way to do this is to use version tracking in your application. This involves storing a version number in localStorage and checking it when your application loads. If the version number in localStorage is different from the current version of your application, you can wipe localStorage and reset all of the local state.

Implementation

Here's an example of how you might implement version tracking in your web application. If you just plop this code into the index.js file of your application, it will check the version number stored in localStorage against the current version of your application. If the version numbers don't match, it will clear localStorage and store the new version number.

index.js
const APP_VERSION = "2.1.1";
console.log("APP_VERSION", APP_VERSION);

const local_storage_app_version = localStorage.getItem("app_version");
console.log("local_storage_app_version", local_storage_app_version);

// if app version has changed, clear local storage and save new app version
// this prevents issues with old data structures
if (local_storage_app_version !== APP_VERSION) {
  localStorage.clear();
  localStorage.setItem("app_version", APP_VERSION);
}

You'll want to make sure that this code is executed right at the beginning of your application's lifecycle, before any other code that might rely on the state stored in localStorage.

Now all you need to do is update the APP_VERSION constant whenever you make a change to your application that requires a reset of the local state. This will ensure that your users' devices are always in sync with the latest version of your application. I recommend doing this anytime you modify the structure of your application state.

Recent Work

Basalt

basalt.software

Free desktop AI Chat client, designed for developers and businesses. Unlocks advanced model settings only available in the API. Includes quality of life features like custom syntax highlighting.

Learn More

Technologies Used

TypeScript

Electron

React

BidBear

bidbear.io

Bidbear is a report automation tool. It downloads Amazon Seller and Advertising reports, daily, to a private database. It then merges and formats the data into beautiful, on demand, exportable performance reports.

Learn More