Sharing data across multiple windows in javascript (client-side) - javascript

So let's say I have a website which doesn't require login but I want to be able to track the user's activity based on what they click on my website, and display data accordingly. For example, if they keep looking at children's books to buy, I would recommend similar children's books. Is this possible in javascript?
The only solution I can come up with is cookies, is there a more efficient way?
Thank you.
I hope this is an acceptable question to post on here, as it is not code related

You could use HTML local or session storage. These are both easier to use than cookies.
You can also use Mod­ern­izr for browsers that do not support HTML5.

html5 websockets might be of help.

Related

Handle appear.in applications as api calls

Is there any way to access the appear.in API (Developer page) via python? I want to create a user with the API and with that credentials, I then want to create multiple rooms. I am assigning each rooms to separate persons hence I am storing the details in a database. Any help?
Developer at appear.in here. The short answer is no, we don't support that kind of functionality. We aim to be a very low-end API solution for those that need video and just that. If you need more advanced support, I recommend checking out http://simplewebrtc.com/. They offer more advanced features, but requires a bit more work.
Feel free to contact us at api#appear.in as well with your questions, that will get you answers much quicker :)

Is a database required for a "quiz" type of game?

I don't know much about databases, I've been asking a few questions about them lately to get a better understanding but I'm still a bit confused about what does and doesn't need one.
I'm making a simple application using HTML/CSS/JavaScript, it has a few quizzes and "tutorials" targeted towards children. I don't want the next tutorial/quiz to be unlocked until the previous one is completed.
So for that would I need a database so that it "saves" when one is completed? I don't need to save scores or anything like that, they just get to move on once they get a passing score.
Any other requirements such as saving to a profile or needing to persist between sessions (e.g. changing of device)?
Browsers have localStorage APIs now which allow you to save a lot of the data (and keep it for a set duration of time). There are also good'ol'fashioned cookies which allow you save pieces of information as well.
Keep in mind that both of the above mandate the user use the same browser and allow these mechanisms. Obviously using "private"/"incognito" browsing would also affect saving status.
It's up to what you feel the requirements are.
EDIT Just saw your mention of a mobile app. If you're planning on allowing the experience to transcend devices, you'll need a database. otherwise, you'll be relying heavily on if they use cross-device sync (like Chrome and Firefox do with bookmarks, passwords, etc.)
If you don't mind that people can do a "view source" on the webpage or use every browsers' developer tools to find out the answers or move on to the next tutorial or quiz, then you can use cookies to store the user's status. Or you can use the preferable Web Storage API.
You might want to look at Firebase. Using just simple JavaScript on the web browser, you can have users with logins (or just allow them to login via Facebook or other services) very easily. And then you can store and retrieve data very easily as well, like quizzes, tutorials and results. This way nobody can see the answers even if they're adept at analyzing the webpage.
When you don't use database, before any check, you have to load all data in your static page.
So My sloution: store students situation in a cookie. On each page check cookie status and then use Jquery remove() to remove (Client-side) those parts of page that he/she can not access.
EDIT
This wont work when JavaScript is disabled.
There seems to be a lot of ideas but no clarifying on the database subject.
TL;DR is: No.
Now for the specifics. A database is nothing more than a way to store information. While traditional "SQL" databases (it is pronounced "Sequel" as in "My Sequel" for MySQL) have concepts of tables, where you define columns with items to store and saves each row with its value, much like an Excel file, some databases like Redis store key-value pairs and others lide MongoDB store JavaScript Objects.
You can store information in the source code (As Variables possibly) or in a file. A database is a way to organize that information.
With that said, in your case, you probably need a backend or an API. An API is basically a means of communication with a server through AJAX (JavaScript in the browser asks for stuff). That would be your way to retrieve information from the server as needed, so that users wouldn't see the answers before they answer.
With that out of the way, there are some options. FireBase (As noted on other answer) and AppBase are easy ways to integrate this concept with little effort. But they tie you and your information to their system, and they are mostly targeting more resource intensive apps.
Since you are using JS and seem to be enjoying your learning experience, I would suggest you consider suing NodeJS and defining the data as either a JSON file or a variable in JS. You keep working on your problem but add options and get to learn some stuff.
If you decide to integrate a database and possibly do some neat stuff, you have most of the groundwork done already.
If NodeJS picks your interest, Mean.IO and KrakenJS are, in my opinion, the best places to start, though they may both seem overkill in your specific case.
Do consider though: A database is just a small possible piece in a puzzle, and it's mostly a horrible way to name some of the software that tries to organize your information. Consider first if you need to organize information, and what and how do you need to organize, then start thinking if databases are the best way to organize it.

JavaScript Temporary Storage

I am writing a Quiz Application and require JavaScript mechanisms to temporarily store data without utilizing MySQL or an Internet Connection. The Game is a Standalone application. What techniques or libraries may be useful for such an application to store game data temporarily in the particular instance of running the JS functionality.
Please provide any references that may be useful.
Much appreciated
If you don't need your data to stay after you leave the page, consider using sessionStorage.
Otherwise, you're fine with localStorage, like I said in the comment, here is a very related answer: https://stackoverflow.com/a/26026430/965907
You can use cookies, but localStorage is a bit more modern and provides several advantages. See https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage for a list of storage options in modern browsers.
localStorage and sessionStorage are very similar, and I'd suggest you just use localStorage. See HTML5 Local storage vs. Session storage for a broader discussion.
Maybe you can use javascript cookies. With them you can keep information with a name for as long as you would like. sessionStorage and localStorage are harder to understand and add to your page, but if you are an expert then you could use those. But as I said, I would recommend using cookies.Good luck with your work!

How to save JavaScript variables and pass them to the next page with jQuery?

So plain and simple, I need a way to save around 50 variables and pass them to the next page to print them out again.
I cannot use a server-side language such as PHP. This must be completely with jQuery/JavaScript.
So to explain the project a little more: I have a large form that will be doing some simple calculations. I need to save all of these variables, including the calculation totals, and create a table on a new page to print them out into so that they are in a nice format. I will then offer two options, to print the table, or to email the table.
There may be a far better alternative than saving the variables and passing them to the next page, although I am just looking for guidance on exactly how to approach this.
I am not asking anyone to write mountains of code for me, just suggestions.
All help and advice is greatly appreciated.
PS. This web app is being created mainly for iOS devices.
Cookies or localStorage are the way to go. Preferably localStorage since it has a much better API and can store more data.
According to caniuse.com it's supported in all major browsers. Additionally, the MDN page I linked above contains code that falls back to cookies if localStorage is not available (but of course that restricts the maximum size to whatever limit cookies in that browser have).
iOS supports localStorage, so, simply do :
localStorage.setitem("yourKey", "yourValue");
and
localStorage.getitem('yourKey');

Persist JavaScript values between pages

I am trying to create a quiz on a web-page using HTML and JavaScript. Each question (having 4 options to choose from) is a seperate html file but uses the same JavaScript file to evaluate whether the choice entered is right or wrong.
However, I’m struggling to find a way to keep track of the number of correct answers provided by the users to calculate his/her score.
Is there a method to create static or static-like variables in JavaScript? Solutions involving cookies are also appreciated.
One possible solution is to load the HTML from your question file into a parent page, but have the whole quiz on that one page. That way, you still get the flexibility of having different pages for each question, but to the browser they are all one page. In addition, any variables created or traked in Javascript will persist throughout the entire quiz.
This is fairly easy to do with Jquery's .load function. You have a div in the middle of your page which loads its content from whichever HTML page you would have navigated to.
Do keep in mind that it is trivially easy for me to go into Javascript and change the number of correct answers. In fact, that problem exists for any client side solution. Should this be for more than fun, and accuracy is important, you may want to send results back to your server after each question. That way, no matter how you implement the quiz, results are persisted back on your end.
Have a look at http://www.electrictoolbox.com/jquery-cookies/
This allows you to easily set and read cookies.
You can keep the data in cookie. however an user may change the cookie and produce better result. Using session is a better choice in this scenario. because whatever you store in client side is unsafe.
However It is better to get the questions in json format with xhr and display them in browser and keep the track in memory
If you are developing a HTML5 application you may wish to investigate DOM storage facilities such as localStorage and sessionStorage: https://developer.mozilla.org/en-US/docs/DOM/Storage
Here are some useful resources / info:
http://ejohn.org/blog/dom-storage/
http://viralpatel.net/blogs/introduction-html5-domstorage-api-example/
http://msdn.microsoft.com/en-us/library/cc197062(v=vs.85).aspx
These days I would focus on making this a one-page app rather than relying on page loads. This not only has the advantage of solving your problem, it also means a more responsive, faster experience for the user.
If you must use page transitions, and you're happy to work with modern browsers only, look into localStorage. Far easier to use and more flexible than cookies - it works just like a serialised JavaSCript object.

Categories