I need a client side browser database. What are my options

DatabaseWeb ApplicationsPluginsHtml

Database Problem Overview


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.)

Database Solutions


Solution 1 - Database

Solution 2 - Database

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 :) .

Solution 3 - Database

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.

Solution 4 - Database

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

Solution 5 - Database

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.

Solution 6 - Database

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/

Solution 7 - Database

Check out HTML5 Local Storage:

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

You may also find this helpful: https://stackoverflow.com/questions/2689939/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.

Solution 8 - Database

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionJnBrymnView Question on Stackoverflow
Solution 1 - DatabaseŠime VidasView Answer on Stackoverflow
Solution 2 - DatabaseKevinView Answer on Stackoverflow
Solution 3 - DatabaseDhruvdutt JadhavView Answer on Stackoverflow
Solution 4 - DatabaseDogBotView Answer on Stackoverflow
Solution 5 - DatabaseRob EvansView Answer on Stackoverflow
Solution 6 - DatabaseSamuel NeffView Answer on Stackoverflow
Solution 7 - Databasejmort253View Answer on Stackoverflow
Solution 8 - DatabaseDmitryView Answer on Stackoverflow