Best way to shorten a URL in javascript *without* a database

I'm a Java dev that's new to Typescript/Javascript. I have a directive to make my app's URL line shorter by coding up some sort of hash. So instead of:

https://www.someurl.com?urgency=all&impact=widespread&contentType=mine&...

I need something like:

https://www.someurl.com?params=somethingShort

How is this problem typically solved for in Javascript? I don't have any storage to use, so this will have to be an in-memory solution.

When I look up "hash URL params", I get something about the "#" sign in the location, and I don't think that's my use-case... Can someone point me to a solution??

> I have a directive to make my app's URL line shorter by coding up some sort of hash. So instead of:

A hash is irreversible, so you cannot use a hash to shorten your URLs without resorting to storage.

> How is this problem typically solved for in Javascript?

I don't think this is a "typical" problem for JavaScript and I can tell you it has nothing to do with JavaScript itself.

This is because you want to use compression, which is a language agnostic problem.

However, I don't think compression will do much for shortening the URLs (depending on the input characteristics of the URL, this might be a different story).

Instead of using compression, I highly suggest you use storage since then you'll be able to use hashes.

If you insist on using compression, search the internet for a suitable (depending on your needs) compression algorithm, then find an implementation of that algorithm in JavaScript (should't be too hard for popular compression algorithms).

Last resort would be to develop your own compression algorithm, but since you're asking this pretty basic question here, I highly doubt you have the skill required to do that.

Typical URL shorteners use a database to pair a short ID with the real URL.

Without a database you have to create an algorithm that allows the same data to exist in a shorter form. How you do that is really up to you.

The first thought is to gzip the parameters, and then base64 encode that binary data to make it work in a URL. But this probably wont help.

urgency=all&impact=widespread&contentType=mine

Gets gzipped and then base64 encoded as

eNorLUpPzUuutE3MyVHLzC1ITC6xLc9MSS0uKEpNTFFLzs8rSc0rCaksSLXNzcxLBQCqJxIm

(see https://bugdays.com/gzip-base64)

There's just not a lot of repetition in that, and using base64 encoding adds extra bytes.

So this is not a general problem. It is a specific problem that will most likely be solved in a way that is specific to your application.

A better option is to create a compressed encoding yourself.

For example, you could define a compressed format that has a single letter for each value you want to pass in a specific order.

urgency=all&impact=widespread&contentType=image/jpg

Could encode as:

awj

Where:

• a at position 0 expands to urgency=all
• w at position 1 expands to impact=widespread
• j at position 2 expands to contentType=image/jpeg

You then write an encode() / decode() function for that format that works the real data you want in your application.

What format you choose is up to you and what data is being encoded. Are these all "one of a finite list of values" kind of parameters (i.e. all or none)? Or are there numeric parameters? Free text strings of unknown length?

The more you can make assumptions about your data, the more you can compress it down. You'll just have to come with an encoding scheme that works for what your data is.

There could be confusion on what you mean by "hash". As hash could represent a fragment identifier in the URL, usually represented by the # like #fragmentName.

For my answer, I'm using a javascript map to store the full data that you would need, but you can use a basic object also.

This will allow you to get a URL parameter called keyID which you can always change. The URL format would be something like: https://example.com/?keyID=test1

Then we check for that key to exist in our data map and if it does, you have data to use for that page.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
//const keyID = urlParams.get('keyID'); //actually use this line
const keyID = "test1"; //for testing

let data = new Map();
data.set("test1",{"urgency" : "all","impact" : "widespread","contentType":"mine"});

let pageData;

if(data.has(keyID)){
  pageData = data.get(keyID);
}

console.log(pageData)

<!-- end snippet -->