CODEWITHSUNDEEP
javascriptdatabasehtml
OutFall
OutFall

Reputation: 482

A way to emulate a database with HTML5's localStorage

I have a small table of roughly 600 rows which looks something like this:

Make  |  Model     |  Year1  | Year2
Chevy |  Silverado |  2000   | 2014
Chevy |  Cobalt    |  1988   | 2015

The site works like this: User picks a single year in a dropdown and the query looks for that year in range to display all available Makes for that year. Then the user picks his Make and the query looks for available Model based on that year/make.

What I am trying to do is to make that process available offline without the need to query online db every time.

I was looking into localStorage, but it can only store key-value pairs. So I can't see how I can do this with localStorage. WebSQL won't work either because it's not supported in all browsers.

Any suggestions on how I can implement this offline? The user only needs to visit the site once and then all the data should load locally and query locally.

Just to be clear I'm not asking for any code. I am asking for a bigger picture of how to implement this.

Upvotes: 3

Views: 4854

Answers (3)

mpd
mpd

Reputation: 2230

I would recommend using an existing library (list here) that handles storing data locally, so you have backwards compatibility(cookies) and future proof code(IndexDB/NoSQL/Something else).

I think this is very similar to this question.

I would do the same (at least for a naive solution, which is probably ok for your small amount of data), just create JSON objects with all of the data and stringify/parse them when storing/retrieving. (e.g. answer from another thread)

EDIT: wrong link

EDIT2: Changed future technology examples

Upvotes: 3

Gerd Wagner
Gerd Wagner

Reputation: 5673

I have described how to store databse tables in the form of "JSON tables" with locaLStorage in Chapter 2 Storing Data with JavaScript's LocalStorage API in my article "JavaScript Frontend Web Apps Tutorial Part 1: Building a Minimal App in Seven Steps", which explains how to manage book data using locaLStorage.

Upvotes: 1

Mike W
Mike W

Reputation: 318

You could store your data in localstorage in JSON format.

But remember not to exceed localstorage capacity: What is the max size of localStorage values?

Upvotes: 0

Related Questions