3

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.

OutFall
  • 482
  • 7
  • 20
  • Could store in a serialized array or json encode it. Not sure what space you need for the table and if it will fit within local storage, but its worth a go – zgr024 Jan 08 '15 at 21:24
  • Does it hasv to be localStorage, could you not use Web SQL Database – ShiftyThomas Jan 08 '15 at 22:10

3 Answers3

3

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

Community
  • 1
  • 1
mpd
  • 2,223
  • 1
  • 19
  • 23
  • Notice that WebSQL has been depreciated, so better don't call it "future proof code". Also, I don't think that a library is really needed anymore, since HTML5's localStorage has been supported for a long time (since IE 9). – Gerd Wagner Jan 08 '15 at 21:50
  • Thanks @gwag, didn't know it was deprecated but I hadn't heard about it in a while – mpd Jan 08 '15 at 22:00
1

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.

Gerd Wagner
  • 5,481
  • 1
  • 22
  • 41
0

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?

Community
  • 1
  • 1
Mike W
  • 308
  • 3
  • 5