At the beginning of this year I decided to focus on improving my JavaScript knowledge. I used a combination of online resources (www.codecademy.com) and books (Professional Javascript for Web Developers by Nicholas C. Zakas) to help get a good grounding of the fundamental concepts and then I built a mini-JS Quiz application (https://github.com/theonicolaou/jsQuiz) with my new-found skills.
As you can see in the README, I have a roadmap for the JS Quiz - my learning experience is far from over! I recently started to look at two of the items in the roadmap at a very basic level - add login functionality using localStorage, and store the quiz questions in a JSON file - to get a better understanding of what might be involved when I eventually get round to continuing the project. This is a short blog post about my experiences of prototyping with JavaScript, JSON and localStorage.
I know the internet is a big place and I know you have to persevere when searching for information/resources/tutorials etc, but I was quite frustrated at how few basic (working) tutorials I found for using localStorage and using JSON with JavaScript. Maybe I wasn't looking in the right places, but I was looking for a long time; I'm sure I spent a good couple of hours trying to find a simple, clear tutorial of how to hook up a JSON file into a JavaScript file and a similar amount of time looking for a tutorial on how to use localStorage. In the end, I found the very basic information I needed (combined with Nicholas Zakas' book) and I created two Plunkr's which I converted into GitHub repos:
Basic HTML5 localStorage example
Type a username and
password into the fields and click "Log in" to display the data in an
alert. The data is stored at this point. Then you can retrieve it by
clicking "Show Data".
To test that localStorage is working, remove the localStorage.setItem
lines in the script.js code, then fill in the fields and click "Log
in". The alert will display the inputted values but clicking the "Show Data"
button will display "null" because by removing localStorage.setItem the values are not being stored. Therefore the "Show Data" button will not have anything to show.
Basic JS with JSON example
A basic example of how to use an external JSON file in JavaScript, by calling it with AJAX. The AJAX looks for a JSON file to parse as long as the onreadystatechange event detects a readyState of 4 (request finished and response is ready) and a status of 200 ("OK"). The JSON file itself is just a collection of name/value pairs, and an array with name/value pairs. The JavaScript then looks for specific values in the JSON file and writes it out into the document.
Both examples are very basic and raw; I know there are
elements of the code which can be improved but my main goal was to gain an understanding of how JSON and localStorage works. I think I have achieved my goal and I plan to use my prototypes as a starting point for improving my JS Quiz.
I hope my examples are helpful! Feel free to fork the repos and submit pull requests with improvements!
