There are numerous advantages to the improved Local Storage utility in HTML5. As well as having the ability to store greater amounts of information at client side, your apps can utilise this data in a more efficient fashion. Storing data at the client inevitably reduces the need to continually fetch it over the network.
The Web Page
Your HTML5 Web pages should all have the same outline structure, with the HTML5 DOCTYPE. Use the following as a guide:
<!DOCTYPE html>
In the body we will place our page elements and in the head we will use a JavaScript section. Add these HTML elements in the body section of your page:
Here we will display the local dataType some text in the box then click the button to store it locally.
This code creates a text area for the user to type some text into. Under the text field is some informative text telling the user to input text then click the button to store it locally.
JavaScript Function
Now create a script inside the head section of your HTML5 page. Add the following in the head:
Inside the script, add the following function:
function storeLocally() {
}
This is the function that will execute when the user clicks the button. Inside the function, first get a reference to the "div" element we want to write the result into:
var showDataElement =
document.getElementById("local_data");
We are going to create a variable within the browser's Local Storage object. When the user returns to the page, the variable will be set from the last time, unless they have deleted the data. If the variable already exists, we are going to overwrite it with the new data. However, let's first check whether it has already been set and if so what was entered before:
var storedData = localStorage.typedData; if(storedData==null) storedData = "";
Now let's get the newly entered data from the text field:
var newData = document.getElementById(inputData).value;
Update the Local Storage object with this new data:
localStorage.typedData = newData;
Finally, let's write the previous data and new data to the browser as a visible response to the user:
showDataElement.innerHTML = "Last time you entered:
" + storedData + "This time you entered:
" + newData;
When the script executes, the previously stored data will no longer be stored. If you wanted to keep a record of everything the user enters you could append the new data to the Local Storage variable rather than replacing it each time. This code is simply an example to illustrate the practice of using Local Storage in HTML5, but you will of course need to tailor it to the needs of your own projects.
Alternatives
The other main new storage option with HTML5 is the Session Storage. Unlike Local Storage, data stored in the Session Storage object only persists for a single user session. This is obviously more sensible if you don't need your stored data to stay around between user visits to the site. If you do need the data to remain accessible, use the HTML5 Local Storage option outlined above.
Related Links
No comments:
Post a Comment