DEV Community

Cover image for Stop Storing Plain Text in LocalStorage: End-to-End Encryption - Finally Simple
M B Parvez Ron
M B Parvez Ron

Posted on

Stop Storing Plain Text in LocalStorage: End-to-End Encryption - Finally Simple

#webdev #security #javascript #tooling

Hey friends! đź‘‹

Have you ever stored something in your browser's Local Storage - maybe an API key or some user settings - and felt a little bit... guilty? You know, that feeling of "I hope nobody looks in the Application tab and sees this."

Let me know if you try the Encryption in HTML feature.
It’s my favorite!

Or imagine, you want to send a private PDF to a client. You don't want to just attach it to an email where anyone could intercept it. You want to feel like a secret agent passing a locked briefcase.

We all have data we want to keep private. But usually, we skip it because we think, "Eh, adding encryption is too much work."

Well, not anymore. Meet DataCrypt. It’s a tiny tool I built to make you feel like a privacy pro, without writing complex code.

Why Did I Build This?

As a Full Stack Developer, two specific things constantly bugged me, which eventually led to DataCrypt:

  1. The Local Storage Problem: I use Local Storage a lot because it is fast and easy. But saving sensitive data there in plain text always felt unsafe. I needed a quick way to "lock" that data before saving it.
  2. The "End-to-End" Curiosity: I saw apps like WhatsApp saying "End-to-End Encrypted" and I really wanted to know - how can I build that for my own apps?

I looked for existing libraries, but they were either too complicated or too heavy. So, I decided to build DataCrypt to solve these issues simply and efficiently.

Feature Discovery: What’s Inside?

DataCrypt isn't just another library; it's a lightweight toolkit for developers.

  • Zero Dependencies: This is huge. It uses the browser's own engine (Web Crypto API). No heavy node_modules.
  • Write Once, Run Everywhere: Use the same code on your Node.js server and your React/Vue frontend.
  • Smart Compression: Encrypting a big file? DataCrypt automatically zips it (using GZIP) so it takes less space.
  • The "Magic" HTML: This is the coolest feature. You can turn any file into a standalone HTML page. You send the HTML file, and it asks for a password to open!

How Does It Help You?

Let’s look at 3 scenarios where DataCrypt saves the day.

  1. The "Guilt-Free" Local Storage: Stop saving plain text in the browser. Encrypt it first!

    Scenario: You want to save a user's configuration or a temporary auth token.

    Solution: Pass it through DataCrypt with a user-specific password. Now, even if a malicious browser extension tries to steal the data, they just get a bunch of random gibberish.

  2. Implementing Zero-Knowledge Architecture (The "Trustless" Model)

    Scenario: In traditional apps, the server holds the keys to the data. If your database is hacked, or if a rogue employee accesses the admin panel, your users' sensitive data (like medical records, financial details, or intellectual property) is exposed.

    Solution: Adopt a Zero-Knowledge Architecture using DataCrypt.

    • User types note.
    • Browser encrypts it.
    • Server saves the encrypted text. Because the server never sees the password, the data is 100% private to the user.

  3. Sending Files Like A Pro

    Scenario: You need to send a sensitive document to a client via Slack or Email.

    Solution: Don't send the PDF directly. Use DataCrypt to wrap it in a password-protected HTML file. The client downloads the HTML, enters the password, and boom - the PDF unlocks. No software needed on their side!

Let’s Code

Installing is just one line, zero dependency, no configuration required:

npm install data-crypt
Enter fullscreen mode Exit fullscreen mode

The Code Demo

Here is how easy it is to lock and unlock data:

import { DataCrypt } from 'data-crypt';

const mySecret = "I ate the last slice of pizza 🍕";
const password = "super-strong-password";

// đź”’ Lock it
const lockedData = await DataCrypt.encrypt(mySecret, password);
console.log(lockedData); // Output: U2FsdGVkX1... (Encrypted string)

// 🔓 Unlock it
const original = await DataCrypt.decrypt(lockedData, password);
console.log(original); // "I ate the last slice of pizza 🍕"
Enter fullscreen mode Exit fullscreen mode

The CLI Magic (No Code Needed)

You can even use it directly in your terminal!

# Encrypt text
dc encrypt "A simple secret text" "my-password"

# Decrypt text
dc decrypt "H/9kQK......" "my-password"

# Encrypt a file and compress (-z) it
dc encrypt -f server.log -o server.enc -z "my-password"

# Decrypt file (auto decompression)
dc deencrypt -f server.enc "my-password"

# Create that magic HTML file for your friend
dc encrypt -f secret.pdf -o open_me.html --html "securePass123"
Enter fullscreen mode Exit fullscreen mode

Please visit the README.me file for more example and API references

Wrapping Up

I built DataCrypt because I wanted to make data privacy fun and easy, not a chore. Whether you are building the next big secure chat app or just want to hide some settings in local storage, I hope this tool helps you out.

Give it a spin!

đź”— Visit the Github repo to submit an issue or contribute
📦 NPM: npm install data-crypt

Top comments (0)