javascript - A way to emulate a database with HTML5's localStorage - Stack Overflow

admin管理员组

文章数量:1023773

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.

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.

• javascript
• database
• html

Share Improve this question Follow asked Jan 8, 2015 at 21:18 OutFallOutFall 48277 silver badges2020 bronze badges 2

• 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 Commented Jan 8, 2015 at 21:24
• Does it hasv to be localStorage, could you not use Web SQL Database – ShiftyThomas Commented Jan 8, 2015 at 22:10

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

I would remend using an existing library (list here) that handles storing data locally, so you have backwards patibility(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

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.

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?

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.

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.

• javascript
• database
• html

Share Improve this question Follow asked Jan 8, 2015 at 21:18 OutFallOutFall 48277 silver badges2020 bronze badges 2

• 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 Commented Jan 8, 2015 at 21:24
• Does it hasv to be localStorage, could you not use Web SQL Database – ShiftyThomas Commented Jan 8, 2015 at 22:10

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

I would remend using an existing library (list here) that handles storing data locally, so you have backwards patibility(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

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.

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?

本文标签： javascriptA way to emulate a database with HTML539s localStorageStack Overflow