Offline webapp. How to store data?

Question

Introduction:

App must be able to run completely offline, store data locally and post it online via AJAX whenever there is an internet connection available - this may be some days later.

Question:

How to store data using Javascript?

Additional notes:

• I don't want to use any server-side technology.
• It must be secure like a database. I've read about cookies and html5 storage but none of them sound convincing.

Though

use html5 localstorage – Appealing

If it's happening clientside, it's not secure. I can modify requests, change your scripts and send whatever I want to your server. – Preemie

@Preemie how can you modify requests on an HTTPS connection without having a virus, worm, etc on the client's computer? – Glace

@Markasoftware: HTTPS doesn't make a difference if I'm the actual client. – Preemie

ok that makes sense. I just thought he might be talking about secure from a hacker, not the client. – Glace

Answer 1

If you are supporting modern browsers, you can make use of HTML5 Local Storage.

Persistent local storage is one of the areas where native client applications have held an advantage over web applications. For native applications, the operating system typically provides an abstraction layer for storing and retrieving application-specific data like preferences or runtime state. These values may be stored in the registry, INI files, XML files, or some other place according to platform convention. If your native client application needs local storage beyond key/value pairs, you can embed your own database, invent your own file format, or any number of other solutions.

Example

// Save data to a the current session's store
sessionStorage.setItem("username", "John");

// Access some stored data
alert( "username = " + sessionStorage.getItem("username"));

// Get the text field that we're going to track
var field = document.getElementById("field");

// See if we have an autosave value
// (this will only happen if the page is accidentally refreshed)
if ( sessionStorage.getItem("autosave")) {
   // Restore the contents of the text field
   field.value = sessionStorage.getItem("autosave");
}

// Check the contents of the text field every second
setInterval(function(){
   // And save the results into the session storage object
   sessionStorage.setItem("autosave", field.value);
}, 1000);

Browser Compatibility

---

Older Browsers

Use Polyfill.

Eversion

Answer 2

Depending on how complex your data structures are that you want to store you could look at indexedDB. It's availability is still pretty bleeding edge but with a polyfil you can target the majority of modern desktop and mobile browsers.

The data stored is no more secure than any other client storage model since it's meant to be read with JavaScript.

The API itself is pretty complex to dive straight into using so you might want to look at wrapper APIs such as PouchDB which syncs with CouchDB or if you want something much simpler there's db.js.

Triley

Answer 3

You can use HTML5 Local Storage

Use polyfill for older browser https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills#web-storage-localstorage-and-sessionstorage

Appealing

I think I'll do this. But what if I want to create an offline network and make available the local-storage DB to all users? – Though

Answer 4

Exactly what you want:

• You can set up a CouchDB instance on IrisCouch to store your data. CouchDB is a database that acts as a webserver, so it can serve html pages based on its own data -- this use of the CouchDB (to serve pages) is commonly called CouchApp.
• So you learn about CouchDB and write a HTML/Javascript/CouchDB-flavored app to serve your page. There are tools that facilitate this.
• After that, you only need to send the data to your CouchDB database and it will be on your web page. You'll manage the client side stuff with PouchDB, a implementation of CouchDB that runs on your browser and saves your data locally, so you never lose it, and automatically updates your local data on the CouchDB server and vice-versa. It's the bleeding edge of the offline storages on the internet.
• To ensure that the clients will not send bad data to the server, you can set up authentication (so to connect Pouch with Couch you will need to provide a password) or you can set up validation functions (so the server will only accept data storage requests that match certain parameters you define). These two approaches are well explained in the guide I linked before (here), but you will certainly run into all of this during your CouchDB learning process.

A lot of stuff, but a cool solution enough for the trouble. Also, this CouchDB thing is so easy I can bet you'll read and learn everything in one or two days.

Length