71

I'm creating a web site that I think must have a client side database. The other option would be to stick everything on the server at the expense of increased complexity and decreased scalability. What options do I have? Must I build a plugin? Must I wait until everybody's HTML5 compliant?

Update There's been a lot of comments about why I would actually need this. Here are my thoughts. Tell me if I'm being silly:

  • The clients will have a large and complex state that will require something like a database to provide the data interaction that I need. Therefore (I think) cookies are out of the picture.
  • This data is transient, so the client won't care if it gets erased as soon as they close a session. However they will need to keep the data if they go to a different web page and then come back. Therefore (I think) somehow storing the data in some sort of a javascript SQL implementation will not work.
  • I can certainly do everything that I want to do on the server, and servers can scale to manage the load (Facebook). But (I think) I'd rather build a plugin than pay for the infrastructure to support this load. This is for a bare bones startup. (The richer the startup is, the barer my bones will be.)
JnBrymn
  • 24,245
  • 28
  • 105
  • 147
  • 2
    Why you think it must be on the client side? Please explain? – Carlos Muñoz Jan 24 '11 at 02:08
  • 2
    "I'm creating a web site that I think must have a client side database" - Perhaps describe your actual problem, and not a perceived solution to a problem you haven't told us.... – Mitch Wheat Jan 24 '11 at 02:11
  • 1
    @John What browsers do you want to support? – Šime Vidas Jan 24 '11 at 02:21
  • @Carlos and @Mitch - Scalability. I would rather have 1M users doing complex searches on their side rather than my server doing that all for them. – JnBrymn Jan 24 '11 at 02:51
  • @Šime - All eventually. But I guess the most popular first. – JnBrymn Jan 24 '11 at 02:52
  • @John What about IE6 and IE7? They might be gone in one year but are still relevant today. – Šime Vidas Jan 24 '11 at 02:55
  • 1
    I agree with the others. If facebook can scale as large as it has without using client side databases, I don't think you really understand how scalable modern databases are. Not only that, I think it wouldn't be much of a web app if I lost all my data if I wanted to switch browsers, or use it on another machine. At that point, I might as well not be using a web app at all. – Kibbee Jan 24 '11 at 02:55
  • @Kibbee - you wouldn't loose all of your data, just transient data that is useful for only a little bit, but needs to have lots of queries run on it. – JnBrymn Jan 24 '11 at 04:28
  • 2
    @Kibbee you're basing your comment on the pompous assumption that people have the cash / investors to scale. Consider low budget community / open projects for instance. Q is valid. – Robert Cutajar Jun 27 '14 at 15:00
  • 3
    I think some people here are missing the point. Client-side databases are a way of doing complex queries against data without having to have a network connection or write a query algo for each specific case. They are also an excellent way of persisting data on the client for later use, and a central point for your application state. Data sync to a server can then be intermittent while the application still functions properly without the server. – Rob Evans Jul 31 '15 at 09:51
  • 1
    Just to add to Rob Evan's comments - Meteor has become a very popular development platform and at its core is a client side database. The type of reactive data the combination of client and server side databases offer can be very powerful. Meteor's popularity shows that there is some type of interest out there for client side databases. – AlexGad Sep 01 '15 at 21:31
  • I don't think that this should be closed, it doesn't ask "What is the BEST option" it asks "What are my options?". The poster wants an exhaustive list, which is not opinionated. If someone provides a single opinionated answer, that is the fault of the person answering and it is incorrect. – ADJenks Jan 31 '19 at 00:31

8 Answers8

43

Indexed Database (Can I use)
Web SQL (Can I use)
localStorage

Šime Vidas
  • 182,163
  • 62
  • 281
  • 385
16

I'm about 5 years late in answering this, but given that there are errors and outdated data in some of the existing answers, and unaddressed points in the original question, I figured i'd throw in my two cents.

First, contrary to what others have implied on here, localStorage is not a database. It is (or should be perceived as) a persistent, string-based key-value store...

...which may be perfectly fine for your needs (and brings me to my second point).

  • Do you need explicit or implicitly relationships between your data items?
  • How about the ability to query over said items?
  • Or more than 5 MB in space?

If you answered "no" to all all of the above, go with localStorage and save yourself from the headaches that are the WebSQL and IndexedDB APIs. Well, maybe just the latter headache, since the former has been deprecated.

There are also several other client-side storage facilities (native and non-native) you may want to look in to, some of which are deprecated* but still see support from some browsers:

Check out BakedGoods if you want to utilize any of these facilities, and more, without having to write low-level storage operation code. With it, placing data in one (or more) of them, for example, is as simple as:

bakedGoods.set({
    data: [{key: "key1", value: "val1"}, {key: "key2", value: "val2"}],
    storageTypes: ["silverlight", "fileSystem", "localStorage"],
    options: optionsObj,
    complete: function(byStorageTypeStoredKeysObj, byStorageTypeErrorObj){}
});

Oh, and for the sake of complete transparency, BakedGoods is maintained by this guy right here :) .

jinks
  • 505
  • 1
  • 5
  • 17
Kevin
  • 2,617
  • 29
  • 35
13

Use PouchDB.

PouchDB is an open-source JavaScript database inspired by Apache CouchDB that is designed to run well within the browser.

It helps building applications that works online as well as offline.

Basically, it stores the last fetched data in the in-browser database (uses IndexedDB, WebSQL under the hood) and then syncs again when the network gets active.

Alireza Zojaji
  • 802
  • 2
  • 13
  • 33
Dhruvdutt Jadhav
  • 408
  • 4
  • 5
8

I came across a JavaScript Database http://www.taffydb.com/ still trying it out myself, hope this helps.

DogBot
  • 528
  • 1
  • 6
  • 15
5

If you are looking for a NoSQL-style db on the client you can check out http://www.forerunnerdb.com. It supports the same query language as MongoDB and has a data-binding module if you want your DOM to reflect changes to your data automatically.

It is also open source, is constantly being updated with new features and the community around it is growing rapidly.

Disclaimer, I'm the lead developer of the project.

Rob Evans
  • 6,750
  • 4
  • 39
  • 56
5

If you feel like you need it then use it for the clients that support it and implement a server-side fallback for clients that don't.

An alternative is you can use Flash and Local Shared Objects which can store a lot more information than a cookie, will work in all browsers with Flash (which is pretty much all browsers), and store typed data. You don't have to do the whole app in Flash, you can just write a tiny utility to read/write LSO data. This can be done using straight ActionScript projects without any framework and will give you a tiny 5-15kb swf.

There are two API's you'll primarily need. SharedObject.getLocal() to get access to a LSO and read/write it's data, and ExternalInterface.addCallback which you can use to register an AS3 method as a callback to call your read/write LSO method.

SharedObject

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/net/SharedObject.html?filter_flex=4.1&filter_flashplayer=10.1&filter_air=2

ExternalInterface

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/external/ExternalInterface.html

These links are to Flex references but for this you can just create an ActionScript project with no need for the Flex framework and therefore greatly reduced swf size. There are a number of good IDEs including free open-source ones like FlashDevelop.

FlashDevelop

http://www.flashdevelop.org/

Samuel Neff
  • 73,278
  • 17
  • 138
  • 182
2

Check out HTML5 Local Storage:

http://people.w3.org/mike/localstorage.html

You may also find this helpful: HTML5 database storage (SQL lite) - few questions

When Windows 98 first came out, there were a lot of us still stuck on MS-DOS 6.22. Naturally, there were really cool features on the new operating system that wouldn't run in MS-DOS.

There comes a time when some things must be left behind to make room for innovation. If your application is really innovative and will offer cool new functionality that uses the latest and greatest technologies, then some older browsers will naturally need to be left behind.

The advantage that you have is that, unlike upgrading an operating system, upgrading from IE7 to Chrome 8 or Firefox 3.6 is a more reachable goal for the average user of your app, especially if you provide a link and upgrade instructions.

Community
  • 1
  • 1
jamesmortensen
  • 33,636
  • 11
  • 99
  • 120
1

I would try Mozilla's localForage. https://localforage.github.io/localForage/

Jonathan
  • 1,089
  • 1
  • 7
  • 10
Dmitry
  • 4,143
  • 10
  • 46
  • 57