HTML5 Web Storage

IST541 Interactive Media MIST Program HTML5 Web Storage Since the earlier years of the WWW, web browsers have provided the ability to store data by using “cookies”. A “cookie” is a small piece of data, like a username, that is stored in the web browser to track some web sites you have visited. HTML5 expands the “cookie” functionality by allowing storing large amount of data into the web browser. There are two types of storage provided by HTML5: Local: The information will remain on the web browser until it expires or it is explicitly removed. It can be remain in the browser forever if no expiration date is set. Session: The information will be deleted automatically when the web browser is closed In this tutorial, we will create a web page that will prompt for the learner’s name. Once the learner submits his/her name, a program will save it into local storage and it will open a second web page. This second page will retrieve the learner’s name from storage and display it. A demo of this web page is located at: http://itcdland.csumb.edu/~milara/ist541/samples/storage/setName.html Notice that even if you close your browser and turn off your computer for several days, whenever you open the file http://itcdland.csumb.edu/~milara/ist541/samples/storage/getName.html directly, the name entered is still there! Section 1: Preparing the Folder Structure 1. In your local computer, create a folder called “storage” (optionally, you can give it any other name). 2. Inside this folder, create a css folder 3. Create a new HTML5 file, name it setName.html and save it within the storage folder 1 IST541 Interactive Media MIST Program Section 2: Writing the HTML Content for setName.html 1. Copy and paste the following HTML code within the <body> tag of the setName.html file: <div id="wrapper"> <h1> Welcome! </h1> <form action="getName.html"> Enter your Name: <input type="text" id="learner_name" /> <input type="submit" id="submit" value="Go" /> </form> </div> Observe that the code is using an HTML form. The “action” attribute (highlighted in yellow) specifies the file that will be opened when submitting the form: getName.html The form contains a text box with the id “learner_name” and a submit button with the id “submit” 2. Save the file and open it in a web browser. When submit the form, you should get a “File Not Found” error because we haven’t created the “get.html” file yet. Section 3: Creating the CSS file 1. Create a new file named “storage.css” and save it within the css folder. 2. Copy and paste the following CSS code: 2 IST541 Interactive Media MIST Program #wrapper { width: 900px; margin: 0 auto; text-align: center; } This CSS rule centers the wrapper within the page and also centers its content. 3. Link the external CSS file to the HTML file by entering the following line right above the closing </head> tag: <link href="css/storage.css" rel="stylesheet" type="text/css"> </head> <!- - You don’t need to copy this line, it just shows where to copy the above line--> Section 4: Writing the jQuery Code to Store Data Copy and paste the following code right above the closing </head> tag: <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script> <script> $(function(){ $("#submit").click( function(){ localStorage.setItem("learnerName",$("#learner_name").val()); }); }); </script> Let’s explain each of the lines included within the main jQuery function: The first line: $("#submit").click( function(){ 3 IST541 Interactive Media MIST Program Indicates that the code will be executed only when clicking on the HTML element that has the id “submit”, which is the Submit button. The second line is saving the learners’ name into storage: localStorage.setItem("learnerName",$("#learner_name").val()); $("#learner_name").val() retrieves the data entered into the HTML element with the id “learner_name”, which is the text box entry. This value is then saved into a variable called “learnerName”, this is the actual variable that is saved into local storage. Here is the process graphically: a) Local storage starts empty: b) The learner enters his/her name into the form and then clicks on the submit button. Note: The id of this text item is John Name: “learner_name” Submit c) Since the “id” of the Submit button matches the following line within the jQuery main function, then the code inside the function is executed. $("#submit").click( function(){ e) The name entered by the learner is retrieved using $("#learner_name").val() and is assigned to a variable called “learnerName” f) After executing the line: localStorage.setItem("learnerName",$("#learner_name").val()); local storage contains now the variable learnerName “learnerName” whose value is “John” 4 IST541 Interactive Media MIST Program Section 5: Writing the HTML Content for getName.html In order to test whether the variable containing the learner’s name has been successfully saved into local storage, we need to create a file to retrieve and display it. 1. Create a new HTML5 and save it as getName.html 2. Copy and paste the following HTML code within the <body> tag: <div id="wrapper"> <h1> This certifies that <br /><br /> <div id="learner_name"></div><br /> completed this workshop successfully. </h1> </div> Observe that we are using an empty div container with the id “learner_name”. We will use this container to display the learner’s name through jQuery code. Section 6: Applying the CSS style to the getName.html File 1. We will use the same storage.css CSS file. Copy and paste the following line above the closing </head> tag to link it: <link href="css/storage.css" rel="stylesheet" type="text/css"> </head> <!- - You don’t need to copy this line, it just shows where to copy the above line--> 2. Save and open the file in a web browser. Now when submitting the HTML form located in getName.html, you should be able to go to getName.html. However, the learner’s name won’t be displayed yet. Section 7: Retrieving Data from Local Storage Copy and paste the following code right above the closing </head> tag in order to retrieve the learner’s name: 5 IST541 Interactive Media MIST Program <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script> <script> $(function(){ name = localStorage.getItem("learnerName"); $("#learner_name").html(name); }); </script> In the first highlighted line, we are retrieving the value of the variable “learnerName” from local storage and saving it into another variable called “name”. In the second line, we are writing the value of “name” into the HTML element with the id “learner_name”, which is the empty div container we added previously. Note: I f you are using Internet Explorer, you need to upload the file to the ITCDLand server in order to use Local Storage. 6 .

Load more