Storing json data locally on system using javascript? - javascript

I have a webapp where my employees take quizes(Multiple choice question) .I have to save user response in json format and submit the response to server when user hits the submit button but When a person is going through a quiz and suddenly its system crashes or shutdown due to some reason I want to be able to save the progress of user locally.What I want is to store that json data locally till the time user submits the quiz and once user hits the submit button the local data should be destroyed.So that in case if system crashes I can collect the user progress from participant system manually.So is thr any way to store data locally using javascript?

You can use local storage from HTML5
localStorage.setItem(id, value);
To retrieve the storage value use:
localStorage.getItem(id);

It depends on precisely which browsers you have to support.
For newer browsers, you can use HTML5 local storage. There's plenty of information about using this available already, as well as this SO question asking for good guides about using local storage.
For older browsers, you'll probably want to use cookies. Again, plenty of information on using cookies available already.

Some wrappers exists for client-side persistent storage.
Take for example
Amplify.Store: http://amplifyjs.com/api/store/
I have no experience with it, but is supposed to utilize the HTML 5 storage features and automatically fallback to technologies supported by older browsers.
I hope this helps.

Related

Web-based page session

I'd like to create a web app where the user is able to create a session, with the session being accessible even after leaving the page/browser.
An example would be http://lichess.org where the user goes to 'Create a game' and a page is created. That page then remains accessible even after the session is finished; see: http://en.lichess.org/i8pV0vEv
Essentially what I'd like to know is, what would be needed in order to create a similar effect. I've programmed tonnes over the years, just web environments are new to me! Scala seems like a contender, but in all honesty I have no clue. Perhaps javascript?
Any advice would be appreciated, thanks.
If you want to store user session data permanently irrespective of whether user is on the website or not you may use browser storage facility of HTML 5.
where you can store data on user's browser in form of key value pair and the data will be there permanently(based on type of browser storage you are using) and you can easily manipulate data using javascript.
There are mainly two types of browser storage.
Local Storage: will be there permanently and can be accessed anytime you want.
Session Storage: will be there till the page is open and cleared when user close the browser window.
For your requirement my recommendation is to go for Local Storage
Advantages of Using Local Storage
Can be manipulated easily using JavaScript.
Will be permanent.
No server-side scripting hence, fast to load and manage.
Disadvantages of using local storage
won't work in browser not supporting HTML5(supported in IE 8,chrome 4,Mozilla 3.5,safari 4,opera 11.5 and above)
User will be able to manipulate/delete the value(The browser storage value can be manipulated using resource option of Browser developer tool)
Wont be permanent if user is visiting in In-cognito/in-private mode.(but will be stored during the session.)
Data limit of at least 5MB
Data will be deleted when user clears browser history.
for further reference checkout w3schoold
http://www.w3schools.com/html/html5_webstorage.asp
Web programming is generally session-less and you need a cookie to simulate a session. You save this in your client's browser and in a database to be able to tie them together. Or you can use the browser-session which in the end is also a cookie, but does not scale very well as it's saved in the internal mechanisms of the web-server.
There's nothing Scala specific here, but if you would like to give Scala a try, have a look at Play framework. It's pretty beginner friendly and already has built in support for everything you would need like Sessions, Cookies and Database access.

Javascript substitute for cookies

In javascript, is there a clear and concise substitute for cookies? I am currently storing game saves in cookies, and looking for a way to make them harder to accidentally (or purposely) delete.
There are really not that many places to store data. You can really store it in two places:
The client's machine: There are other options besides cookies, but they are just as likely to be cleared if the user wishes. Cookies are probably still the easiest way to go about this.
Your server: You could create some login system or other to store the data locally and then determine what saved data corresponds to which client.
I still think your best option here is to use cookies. Most games rely on cookies or browser saved data anyways and clearing that within the browser deletes progress.
If you really do not like cookies:
With the introduction of HTML5 you can now save data within the browser, for more information see here: http://www.sitepoint.com/html5-web-storage/. This could allow for more data to be saved and speed up the requests, but also will probably get cleared if the user clears their cookies.

Localstorage functionality

I am trying to understand the features of the localStorage. Suppose, I am storing large json via localStorage. I want the stored data to be shown to the testing team. If I display the stored data in a HTML page and then send the link to the testing team then they will see null, as localstorage stores data locally. The data is too large to copy/paste in a .txtfile. Is there any way of displaying localStorage data, so that it can viewed by others remotely?
The clue is in the name - local storage is local.
There is a work around in that you use iframes and the postMessage API to access localStorage from an external domain.
Is it possible to use HTML5 local storage to share data between pages from different sites?
As Jack Zelig points out, localStorage is local. But it is not only local to the domain but also to the particular browser on the particular machine. You cannot share it between browsers nor between devices. There is no work-around for that. To show it to remote people, you MUST be storing it or sending it through a server to which both devices/browsers are connected, at which point localStorage is irrelevant.
Think of localStorage as a new, improved version of cookies.

LocalStorage Reliability with Phonegap

I'm making a PhoneGap app that needs to store some user data. On the initial app startup, the user will be asked to type in a URL. Because the URL may potentially be long, I wish to save it on the user's device so the he doesn't need to re-enter the entire string every time he starts up the app.
Initially, I was planning on using LocalStorage for this. However, I've heard that LocalStorage doesn't save data very permanently. It would greatly hurt my app's usability if the user had to type in the URL more than once every month or so.
Should I use SQLite instead of LocalStorage for this purpose, or is LocalStorage reliable enough on most mobile devices for this kind of usage?
You should'nt use LocalStorage because it's no longer a persistant storage on IOS since 5.1 and also because Apple can reject your application.
You have several choices :
Using the File API
Using WebSQL (5 Mo max i think)
Installing the SQLite Plugin
For the last choice, you can also install Lawnchair (included) which provides an easy to use key value system on top of SQLite. You won't need to write any line of SQL to use SQLite.

Collecting data locally on the iPad for retrieval later

This isn't a native iPad app. This is a HTML5 web app which runs from the iPad's local storage (so it will display offline).
What I need to do is have a form which collects information and stores it somewhere locally for retrieval later.
Is there any way I can achieve this. I don't care how the data is stored, just that it doesn't expire (like cookies do) and its relatively easy to retrieve at a later date.
Thanks
Apple have a Safari Client-Side Storage and Offline Applications Programming Guide section in their documentation. It lists the various options.
Key-Value storage sounds like it best fits your usecase.
If you don't care what you use, you can just as easily use cookies and set their expiration date to the year 3000 or something!
Alternatively you can take advantage of localStorage and store the form data in JSON format.

Categories