HTML 5 local storage

Question

Can I save data to to either CSV or XML files on offline on client-side via HTML5?

Answer 1

The offline storage is an internal storage. It is not meant to export some files to a specific format / specific folder on disk.

Answer 2

The web storage API stores data as [key,value] pair where both key,value are Strings.

So data in any format needs to adhere to this mechanism for local storage. So for example, if you have a JSON object like :

{
  name:'John',
  gender:'male'
}

You can store it (through JavaScript) after passing it as a string like :

localStorage.setItem("myObj","{name:'John',gender:'male'}");

For JSON objects, use JSON.stringify() to convert them to strings and use JSON.parse() to read them back.

Answer 3

You can use localstorage, but that only allows you to store something on browsers' internal storage (you cannot decide where and how to write data).

There's also a File API, but is at its very early stages and, by now, it doesn't allow to store files arbitrarily on the client:

HTML 5 File API

Answer 4

Let say you have created array or object like this.

var arrayOrObject = [{obj1:{name:John, age:16}},{obj2:{name:Jane, age:17}}];

you can save this data to local devices by using localStorage.

if (typeof(localStorage) == 'undefined' ) {
    alert('Your browser does not support HTML5 localStorage. Try upgrading.');
} 
else {
     try {                  
        localStorage.setItem("storedArrayOrObject", JSON.stringify(arrayOrObject));
                             //saves to the database, “key”, “value”                
    } catch (e) {
        if (e == QUOTA_EXCEEDED_ERR) {
            alert('Quota exceeded!'); //data wasn’t successfully saved due to quota exceed so throw an error
        }
    }
}

To get the data in Array or Object Structure:

 var getStoredArrayOrObject = JSON.parse(localStorage.getItem('storedArrayOrObject'));`

To remove the localStorage Data:

 localStorage.removeItem('storedArrayOrObject');

Don't recommend this but available:

 localStorage.clear();

Answer 5

You could save and export as csv like this... http://joshualay.net/examples/StamPad/StamPad.html