Store data locally using HTML and JavaScript - javascript

I have a small LAN with some computers.
I'm looking for a way to build a dynamic HTML webpage that uses JavaScript to store some data locally (can't use server side - only client side).
The webpage will be stored on a network drive shared with all the computers.
I wish to do that using a file, maybe an XML file or something similar that will be loaded using JavaScript and then saved again after some changes.
The data must be shared with all the computers on the LAN.
How can I do this?

HTML5 localStorage
//Set
localStorage.setItem("lastname", "Smith");
//Get
var lastName = localStorage.getItem("lastname");

You have the following options :
1.LocalStorage : You can store data in variables. There would be a limit as to how much data you can store.
Refer : http://en.wikipedia.org/wiki/Web_storage.
Eg:
// Store
localStorage.setItem("sample", "test");
// Retrieve
var sample = localStorage.getItem("sample");
2.WebSQL : This should be the most easy way of storing in client side. WebSQL is supported in almost all current browsers(HTML5). However there is no longer official support for WebSQL as its depreciated and no future updates.
Refer : http://en.wikipedia.org/wiki/Web_SQL_Database
3.IndexedDB : This is also another way to store data in local database. However this is not yet supported in all browsers.
4.XML
If you are going forward with storing data in local DB, then you can utilize PersistenceJS.
Refer : https://github.com/zefhemel/persistencejs

Try like this:
store a value :
localStorage.setItem("lastname", "amir");
get a value:
localStorage.getItem("lastname");

You can use HTML 5 LocalStorage

Depending on the flavor of data you're storing, simple cookies might work, accessed with plain old JS.

finally I found a solution for it!
I am using a jQuery plugin called: twFile (http://jquery.tiddlywiki.org/twFile.html).
It uses an activeX FileSystemObject - it works great on IE9.

Related

Write json to local disk javascript

I wrote a small application(proof of concept) in angular.js and i encountered the need of persisting simple data between application instantiations.
I would like to know if there's a way of storing JSON objects to a local file, on my computer, without server or database intervention.
The easiest solution I found is using ColdFusion, but this requires setting up a server too.
Thanks!
You can use HTML5 Local Storage.
you can store Json object like this:
var jsonObejct = {'city':'New Yourk', 'country':'USA'}
localStorage.setItem('jsonObejct',JSON.stringify(jsonObejct));
you can retrieve from Storage Like:
var loadedObj = localStorage.getItem('jsonObejct');

How do I write data to a file with Javascript?

I made a game with javascript using this tutorial as a base: http://html5gamedev.samlancashire.com/making-a-simple-html5-canvas-game-part-3-drawing-images/
How do I get it to write the data from the item counter (var itemCounter = 50;) to a text file named savedata.txt? I googled it, but no helpful results came up. Can someone help me?
Technically, you can create a server with nodejs [which is built with javascript]. Details can be found here
Its not possible to store the data as a file on the client.
But you can use localstorage, websql, indexeddb or simply cookies for it.
Note that all of these storages have different properties in terms of lifetime.
You could also create a blob using the blobapi and then create a dataurl and request the user to save it, using drag and drop + fileapi to read the data, this approach however will make it easy for users to modify the data.
Writing a file is posible with the new FileWriter and FileSystem APIs.
More mature solutions (not using files) have already been mentioned
Javascript does not support working with files, for data storage several options are available:
cookies
Local Storage
Server side storage

Client side data storage

I have the following situation: the user submits a form, I fetch the data from the server via an Ajax request and displays a chart. However, I want to give the user the option to display the data in the chart in table form or export as csv after he had submitted the form.
I was wondering what's the best solution to store the data, considering that I don't want the data to persist if the user opens a new window to submit the form again for example.
The application is in Rails.
Thanks.
You have a few options:
Cookies
LocalStorage
SessionStorage
More info: https://developer.mozilla.org/en/DOM/Storage
Non-standard:
window.name can store anywhere from 1mb up to 10mb depending on the browser. This is more of a hack, but is fairly stable. You would need to implement your own accessor/setter methods on this, where localStorage and sessionStorage have API's built in.
Personally i would recommend local storage if all your users browsers support it.
Its very simple to use and you can access it using these to methods.
localStorage.getItem("Itemkey");
localStorage.setItem("Itemkey","value");
localStorage.removeItem("ItemKey");
Its always a good way to go and this means you can assign each window a differnt local storage key and even remove the item when the window is closed, or unloaded !
For reference I found this very useful: http://diveintohtml5.info/storage.html
And combine it with storing JSON objects ( http://www.json.org/js.html ) and you have a very fast,simple and easy to use solution. OR even just store a string,array or what ever is required.

How to check if storing local shared object is allowed by the user or by the browser when in private browing mode?

I am developing a flex component in Flex3 which needs to store some data on the local disk for the future use using
var localData:Sharedobject=SharedObject.getLocal("localdata");
Today while i was working on this, eventually i had opened my chrome browser in incognito mode, so the data was not stored and i couldn't restore the data which i has saved earlier.
So i want to know is there any way to check if the local storage is allowed or not; using javascript. Javascript because i want to check it before even my component is loaded. Pls suggest me some ways to do it.
SharedObject.getLocal() throws an Error when it fails to create SO, so just listen for this error.
EDIT
If you need javascript solution you can create a simple Flash/Flex file which will try to create a SharedObject, then it can pass the result (true/false) to Javascript (using ExternalInterface).
Then you can pass the result to your main component...
JS can't access flash SharedObjects.
*EDIT 2 *
There is HTML5 localStorage, so you may want to use that one, but from your question I understood you wanted to check if Flash local storage works.

Other Alternatives to Cookies

I am using cookies to store data at client end for later access. But my concern is I am unable to set more than 20 cookies and I am looking for alternative to cookies.
Please help me on this
Updated
I found jStorage plugin here But it does not work for me in this case..
You can leverage local/session storage of HTML5
To save a value:
localStorage.name = "Bob";
To get a value:
alert(localStorage.name);
http://www.w3.org/TR/webstorage/
The two main options are Web Storage and Web SQL Database.
Are you storing one piece of information in each cookie? Because you could use JSON serialization to store more data in each individual cookie.
There are few alternatives to cookies
Session (server side)
If HTML5 compliant browser then you can even have client side database
You can store only one cookie representing a session ID (for example, an alfanumeric randomly generated long string). Then you just need a database to store all your data (that now is on 20 cookies) together with that session ID. At runtime, you read from the only cookie the session ID, and load from the DB all data.

Categories

Resources