What Is The Best Way To Locally Store User-entered Data On A Web Page?

I'm working on web app that basically allows the user to enter data about a product and then add it to the web page in a table. I would like to save this information in a file of s

Solution 1:

localStorage could work if you are not storing too much data, but IndexedDB might be a better choice, it has a higher default storage limit and allows you to store your data in a more structured way. IndexedDB allows you to store objects and anything else that can be cloned by the structured cloning algorithm without you having to manually serialize/deserialize it (localStorage can only store strings).

IndexedDB is kind of complicated and can be a pain to work with, it might be a good idea to use an abstraction layer. PouchDB is a fairly popular library that takes care of the details for you. Under the hood it uses IndexedDB (or other similar technologies depending on what the current browser supports) and presents you with a much nicer API to work with. One benefit of working with PouchDB is that if you end up using CouchDB on the server PouchDB can actually sync up with it.

Solution 2:

I would suggest localStorage or indexedDb.

The localStorage will be useful if you have very limited data manipulation involved. (CRUD operations can be done in this easily), but if you have more complicated manipulation involved, use indexedDb.

Solution 3:

Have you looked into window.localStorage? This is in modern browsers and allows you to store string representations of objects. See the spec on MDN.