What is the difference between Local Storage, IndexedDB and WebSQL?

Forget WebSQL . It was meant to be a relational database, but it was abandoned by default and today only works in e=Chromium based browsers, without receiving attention, it may even have become insecure.

Local Storage

Serves to store very simple data, it's kind of a basic cache. For example you can save data that is a bit more complex than you would use in a cookie to later use on the page that depends on it.

Basically it it is a table hash, a dictionary with keys named through strings and that holds normally basic values, nothing complex. It is persisted so the data is kept from one session to another unless you explicitly have it deleted. And obviously it's very simple to use your API since the functionality is limited. It's more or less like persisting a huge js object in it.

Can be Configuration Data and user preferences to use the page more Interesting.

IndexedDb

Can be considered a database to store much more information, to have much more complexity in what it puts there, in different ways, with more interesting commitments and in a more convenient way for the purpose of storing various data. For example it allows you to create indexes for the data, so you can access it efficiently in various ways. You can also manipulate data transactionally.

It's not enough to be a bank it's mostly non-relational, which can compete with the kind of software you usually use on the backend, but it can do a lot close to that. In general it will be used as a wider cache or for something that is PWA.

Obviously it's a little trickier to use it.

You can make an application that depends on a database on the frontend, although it will almost always be a bit of an exaggeration to do so.

I don't know if anything has changed, but it made little sense to local storage have an asynchronous API since it handles little data and in a simple way, and IndexedDB this is fundamental and from the beginning the API was thought like this.