Web-based page session - javascript

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.

Related

Using Firestore with offline persistence - Desktop (web)

Offline persistence in Firestore enables the browser to store records that were not uploaded to the server (offline) even after the session was closed (Browser exit)
Please see: https://firebase.google.com/docs/firestore/manage-data/enable-offline
However, firestore does not offer any officially supported way to clear the Chace when a user logs out from his session. Please refer to: https://youtu.be/qGAIimfrBB4?t=257
Recently they released the function clearPersistence, but they clearly state that is not meant for security reasons and recommend to disable Persistence if security is an important factor for you. Please see: https://firebase.google.com/docs/reference/android/com/google/firebase/firestore/FirebaseFirestore#clearPersistence()
Note: clearPersistence() is primarily intended to help write reliable
tests that use Cloud Firestore. It uses an efficient mechanism for
dropping existing data but does not attempt to securely overwrite or
otherwise make cached data unrecoverable. For applications that are
sensitive to the disclosure of cached data in between user sessions,
we strongly recommend not enabling persistence at all.
I want to understand better what's the security hole with using "ClearPersistence" on logout of the user.
Anyone experienced with that? Any other working solution that enables you to remove all the Firestore cache after a logout?
There is no guarantee that your code will run in the browser (or any other client). For example: a malicious user can take the configuration data from your application, and call the API to get access to the same data in your project, but then store it wherever they want.
Another malicious user might prevent the app from clearing the local cache, or quickly copy the local cache file to another location to have a copy before it is cleared.
And these are just two if the simplest examples. The simple fact is that you should assume that any data that exists/persists on the client can be seen by any user who has access to that client.

Getting desktop device id using javascript

I am working on a jump to page short cut option in the login page of one of my projects. This will basically lists a few pages in a dropdown of the login page. User can choose one among them to navigate to that page directly post login. I have a personalise jump to page short cut page and user can add his favourite pages to this dropdown. Now the question is about the storage. I was initially planning to store these favourite pages in the local storage. Since it is browser specific, if the user opens the app in another browser, the data won't be available. My second thought was to get a unique id for the desktop and store the data in the server using this unique desktop / machine id. Is there any way to get this id using JS / Angular JS.
Cross-browser sessions can never be supported because of security reasons (A web application is inherently not allowed to directly write to a file system and is allowed to only access local storage, that too the area allotted to the particular application).
Thus, one browser application will never be able to know what the application wrote for the second browser as they can't use the same local storage which means, they can never really share the states.
You can read more about Local Storages here.
on the other hand, If you actually create a web_app for the browser, then you should be able to get permissions to write to file-system and thus, the same application can work across browsers.

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.

Storing json data locally on system using 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.

Features of openDatabase

I am looking at building an application that stores data locally using openDatabase.
I have a few questions about it.
Can the database been accessed any other way about from the website? I assume using something like firebug I could make queries against the database.But I am not sure if another website uses the same database name it will use or be able to update my website.
Are there any visual tools to be able to access the stored data?
Is the database stored against the logged in user or the computer? for example if a user logs into my website and the database is created and content inserted into the tables. If a different user logs into the computer and accesses the same site will a new database be created or will it reference the already created db?
Thank you!
The browser creates a database when window.openDatabase is called in JavaScript. Every database is stored by the browser on a per domain basis (i.e. if two domains use the same database name, the browser will store them separately). This also means that the database is visible to all the pages in that particular domain. Tools like Firebug are used for debugging client-side scripts and thus they can access the database, but then again so can any bookmarklet or external script.
Why would you need any visual tools to be able to access the stored data? The data is stored on the client-side and not on the server. Thus only the client will be able to modify it. Unless you are planning to make a local web page and store data for personal use, there's absolutely no need to make a front-end for the database.
The database is stored on a per user basis. Internally the browser stores the database in the current user's directory. For example, Opera on Windows it stores it in C:\Users\%USERNAME%\AppData\Local\Opera.

Categories