What ways are there to achieve persistent, shareable storage in html & javascript alone?

Question

Edit: Let me try to clarify with a use case. I would love to be able to run a simple chat-box on an html/javascript page without running my -own- server. I can write the chat application's javascript just fine, but don't have a solution that allows me to store the data to make the chat messages visible to all browsing users. So my app would accept data, post it to a third-party data store (Ideally just in json format), and poll from the data store for updates periodically. That's not the only thing I would use such a json storage service/json storage engine for, but it is the clearest example.

---

I am backing away from server-side programming a little bit as html5 comes to the forefront, and exploring how much I can do with just html and javascript, in terms of functionality that I would previously have to achieve with a html/php/sql server stack. For example, on this nascent html5 site: http://tersh.royronalds.com/ I'm reusing flickr for image hosting and tumblr for blog post hosting. However, just as one example, I now find myself wanting to code a dynamic todo list, something where items can be added and ticked off as completed, and publicly displayed during that time. Another example might be a simple, persistent chat box.

For example, instead of using ajax to push boolean data and text about chat messages and changes to a php script that would then store the data in a mysql database, I'd love to push and pull the data to/from a third-party store that provides somewhat the same type of functionality as the localstorage API, but for json.

So I'd like to solve that using some method of storage with a public js API, e.g. some method for storing json, or any end format that supports strings and numbers really, and is store-able and retrievable, similar to localStorage, except persistent and shareable.

What public technologies/solutions are there for such a thing?

Paresis

basically you just need to be able to read and write to and from a db using only js? – Remote

maybe try the google drive sdk (developers.google.com/drive/v2/reference)? I'm guessing that whatever public general-purpose thing you go with will be much more complicated than standing up a simple and cheap shared hosing environment with a few lines of code to wrap up the database. In modern sites, the backends are turning into nothing more than json pumps but they are still there... – Ethelinda

Yeah, only js on the site. Obviously the storage engine could be whatever was necessary on the third-party server though I expect it wouldn't have to be complex. I'll check out the google drive stuff, see if it'd do what I'm looking for. While yes, I expect working with someone else's api will be more complicated to implement, it would mean that I wouldn't have to run php/apache/mysql or even node.js/mongodb on a server per site instance, and the individuals the site is for could host the page anywhere that hosts static html files, while still having robust functionality. – Paresis

Answer 1

There are few options for this, even if they are not very nice, or well developed.

First off, the one most closely related to a server-side database is a Web SQL Database. This is not a recommended feature by the W3C (it does not use SQLite as a backend), however, it is currently supported in Chrome, Opera, Safari, and Firefox (with an add-on).

Spec

Second, we have Indexed Database API's. These are only supported by Chrome and Firefox. (And IE 10, but who cares?) It is more different from a normal database, but is a recommended method by the W3C.

Spec

Third, we have local storage. This is not a database-like system, it is more similar to cookies. However, these local storage items are better than cookies because they are each a key-value pair (and very intuitive to use, i might add). For example:

// Store value on the browser permanently
localStorage.setItem('key', 'value');
// Retrieve value
localStorage.getItem('key');
//Remove value
localStorage.removeItem('key');
//This is just a small selection of actions you can perform

Spec
Helpful Resource

Fourth, you should maybe take a quick peek at offline HTML. This is a system where select files in your site are downloaded by the browser, and can be used offline. I don't think this is useful for you, but check it out.

Spec
Helpful Guide

As you might be able to tell, I've had more experience in the last two than the first. I hope I was helpful anyway.

Avis

Yeah, I'm familiar with self-only storage and it's good to be reminded of the options available, I especially love localStorage, great for saving settings, but not share-able, of course. A great use-case to explain an example of the type of the problem that I'm trying to solve is coding a very simple chat box visible to all users, without running a full server stack just to save a few lines of chat. – Paresis