DEV Community: Kushal S T

I Built a Wrapper to Fix the Two Biggest Problems with LocalStorage

Kushal S T — Sat, 27 Dec 2025 16:19:29 +0000

We all love localStorage. It is the easiest way to persist state in a web app. You don't need a database, you don't need a backend, and the API is dead simple: setItem and getItem.

But if you’ve built enough production apps, you know localStorage has two major flaws that eventually come back to bite you:

It’s Immortal: Data stays there forever. Unless you manually write code to delete it, your user’s disk fills up with stale data from three years ago.
It’s Exposed: Open the DevTools "Application" tab, and anyone can read (and edit) your application state in plain text.

I built a lightweight, zero-dependency TypeScript package to solve exactly these problems.

Meet @kushalst/local-storage-expiry

The Problem with "Forever" Storage

Imagine you cache a user’s profile to save an API call:

// Standard localStorage
localStorage.setItem('user', JSON.stringify({ name: 'Kushal', role: 'admin' }));

If the user’s role changes to editor on the server, but your frontend logic prioritizes localStorage, the user might see the old admin dashboard for months—until they clear their cache manually.

To fix this, you usually have to write messy wrapper code to save a timestamp, check it on every read, and handle parsing errors. It’s boilerplate city.

The Solution: Built-in TTL (Time-To-Live)

With @kushalst/local-storage-expiry, expiration is a first-class citizen. You set a duration (in milliseconds), and the library handles the rest.

Installation

npm i @kushalst/local-storage-expiry

Usage

The API is designed to feel exactly like the native one, just smarter.

import { set, get } from "@kushalst/local-storage-expiry";

// Cache this data for exactly 1 hour
set("userProfile", { id: 123, name: "Kushal" }, 60 * 60 * 1000);

// Later...
const profile = get("userProfile"); 
// Returns data if < 1 hour old.
// Returns null (and auto-deletes) if > 1 hour old.

If the data is expired, the library automatically cleans it up for you immediately upon access. No more stale UI bugs.

Feature Highlight: Obfuscation

This is where standard wrappers usually stop, but I wanted something better.

By default, localStorage saves plain strings. If you walk away from your computer, anyone can open DevTools and see exactly what is stored.

This library automatically obfuscates your data using a lightweight XOR + Base64 algorithm.

Before (Standard): "user": "{\"id\":123,\"name\":\"Kushal\"}"
After (With this library): "lse_user": "eyJ2IjoxLCJlIjoxNzM1M... (gibberish) ..."

Is this military-grade encryption? No. (Never store passwords in localStorage!). But it prevents casual snooping and stops users from manually tampering with specific JSON fields to break your app state.

Feature Highlight: The Garbage Collector

"Lazy deletion" (deleting when you try to access the key) is great, but what about keys you never access again? They usually sit there, eating up your 5MB storage quota.

I included a flushExpired() utility that scans your storage and bulk-deletes dead keys.

import { flushExpired } from "@kushalst/local-storage-expiry";

// Run this on app startup (e.g., in useEffect or main.ts)
flushExpired();

This ensures your app keeps a small footprint on the user's device, automatically removing junk from previous sessions.

Safety First: Namespacing

You might be worried: "Will flushExpired() delete data from other libraries or my other apps?"

No. The library automatically prefixes all keys with lse_

set('token') -> saves to lse_token
clear() -> only wipes keys starting with lse_

Your other localStorage data is completely safe.

Wrapping Up

If you are looking for a robust, type-safe way to handle client-side caching without pulling in massive dependencies, give this a try. It works in React, Vue, Angular, Svelte, and even vanilla JS.

📦 NPM: npmjs.com/package/@kushalst/local-storage-expiry

Happy coding!

Guide to Mandatory Screen Resolutions for UI Testing with Google Chrome Developer Tools

Kushal S T — Tue, 21 Mar 2023 17:44:20 +0000

As a web developer, testing your UI on various screen sizes and resolutions is crucial. With Google Chrome Developer Tools, you can easily emulate different devices without owning them physically. In this post, we will list the mandatory screen resolutions required for UI testing using Chrome Developer Tools.

So, buckle up and let's dive in! Here are some of the popular resolutions you should add in your test suite

Desktop Resolutions:

1920x1080 - The classic resolution for most desktops. If your website looks good on this, you're halfway there!
2560x1440 - For those with high-end monitors or who need to see the bigger picture :P
3840x2160 - For the ones who like to see things in 4K, but also need a microscope to read the text. lol.
1280x720 - For the users with potato PCs, because someone's gotta test the low-end, right?

Mobile Resolutions:

1080x2400 - The resolution of the latest Android flagship devices
1080x2340 - The resolution of the budget-friendly Android devices that flood the market.
2556×1179 - Resolution of iPhone 14 daddy, the iPhone 14 Pro
720x1600 - The resolution of low-end Android devices that are mostly used for playing Snake.

Tablet Resolutions:

2048x2732 - The resolution of the iPad Pro, for those who like to carry their desktop on the go.
1280x800 - The resolution of most budget Android tablets that come with the promise of "unbeatable performance".
2224x1668 - The resolution of the iPad Air, for those who need a slightly bigger canvas to work on.

Bonus Resolution:

300x600 - For when you want to test your website on a banner ad, because let's face it, we've all been there.

Steps to add these resolutions in the Google Chrome Developer Tools - Emulated Devices

Open Google Chrome and navigate to the website you want to test. (Probably your localhost)
Click on the three dots at the top right corner of the browser to open the menu.
Click on "More Tools" and then "Developer Tools" or use the keyboard shortcut "Ctrl + Shift + I" (Windows) or "Cmd + Option + I" (Mac).
In the Developer Tools window, click on the device icon at the top left corner of the window (it looks like a mobile device and a tablet).
Select the device you want to emulate from the dropdown list or click on "Add Custom Device" if your desired device is not listed.
Enter the mandatory screen resolution in the appropriate fields. Make sure to enter the correct pixel density and aspect ratio values.
Click on "Add" to add the new custom device to the list.
Once the device is added, you can select it from the dropdown list and test your website on the added mandatory resolution.

In conclusion, testing your UI on various screen sizes and resolutions is critical, With these mandatory resolutions, you'll be well-equipped to ensure that your website looks good on any device.

Setting up Mac for Web Development

Kushal S T — Sat, 19 Jun 2021 15:21:51 +0000

You'll need to install the following:

Homebrew - Package manager for OS X. You'll be able to get it here Brew Site
Run the following commands:
brew update - Updates
brew cask install iterm2 - Iterm2 is macOS terminal replacement. Looks beautiful and is customizable
brew install git - Well, you know why!
brew install --cask rectangle - Run this if you are going to need multiple windows opened at the same time. This tool helps in moving and resizing windows in macOS using keyboard shortcuts or snap areas
brew install --cask alfred - This a replacement for spotlight. You can customize and make Alfred do a lot of things. Take a look at their site and you'll be blown away.
Now you are going to need a friendly shell to help you in development. Install fish. It stands for friendly interactive shell. To install this, run brew install fish
Now change your default shell to fish. To do this, add the line /usr/local/bin/fish to /etc/shells
Change your default shell with chsh -s /usr/local/bin/fish
Fish ships with the fish_config command, which launches a graphical user interface (GUI) where you can choose different colors and prompt configurations

Now you'll need a editor to code. Download VS Code from here
Open VS Code and enable code prompt by pressing Command + Shift + P or F1 then type Shell in command palette now you are able to find this option like Shell Command : Install code in PATH from suggested list in command palette. Select that option. This will enable you to open VS Code directly from terminal

Next you need a good font. Install font Fira Code. You'll find instructions here. This font contains a set of ligatures for common programming multi-character combinations. In simple words, multi-character symbols look more legible
After you install this font, update it in VS Code and in Iterm2 to make everything look prettier
VS Code extensions: Install these to make your life easier. GitLens, JavaScript Code Snippets, Prettier , Peacock, TODO Highlight, VS Code Icons. There are more but you might get overwhelmed. Start with these and eventually fellow developers will suggest you more extensions
Basic setup is done. Now you check if you have Chrome / Firefox installed. What's the point of web development when there's no browser? 😝
Now run brew install node to install node.js

Phew! that was a long list. Now, install your favourite framework and start developing 👾👾👾

Discord notifications on Google form submission

Kushal S T — Sat, 03 Apr 2021 15:17:18 +0000

Step #1

Get discord webhook. https://support.discord.com/hc/en-us/articles/228383668-Intro-to-Webhooks will help you understand how to get a webhook for your channel in Discord.

Step #2

Go to the Google form with which you want to integrate Discord. Click on the 3 dot menu on the top right and then click on Script Editor

Step #3

Code...

var POST_URL = "YOUR_DISCORD_WEBHOOK_HERE";

  function onSubmit(e) {
  var discordPayload = {
    content: "New Form Submitted",
    embeds: [
      {
        type: "rich",
        title: "Form Entry",
        color: 307506,
        fields: []
      }
    ]
  };

  e.response.getItemResponses().forEach(function (i) {
    var v = i.getResponse() || "None";

    if (!Array.isArray(v))
      discordPayload.embeds[0].fields.push({
        name: i.getItem().getTitle(),
        value: v
      });
    else
      discordPayload.embeds[0].fields.push({
        name: i.getItem().getTitle(),
        value: v.toString()
      });
  });

  UrlFetchApp.fetch(POST_URL, {
    method: "post",
    payload: JSON.stringify(discordPayload),
    contentType: "application/json"
  });
}

Step #4

Click on Edit -> Current project's triggers in Script Editor.

Step #5

Create a new trigger for onSubmit event

Step #6

There is no step 6! Go ahead and submit the form and test it. you'll see something like this in your Discord channel 👾 👾 👾