Today I've found how to save the information of your data when offline (when your internet connection is disconnect). That's same as when Google email work. It's very useful to use because our submitted data is sometimes lost when our connection is disconnect or offline. Using this feature in HTML5 can prevent these bad situation. The important part is we need to check whether our browser can support "localStorage" or not. If not support, cannot develop anymore. If support, let's go.

First of all, we need to create manifest file for "localStorage". It's the main part to let browser know our application will be using "localStorage". So, we need to add all of files name we will be using into this manifest file as follow. Current my simple application, I've used 2 files called index.html and lc.js. So, I need to add as follow

view plain print about
1CACHE MANIFEST
2index.html
3lc.js

Now I need to let our clients know he/she is now online or office with following javascript.

view plain print about
1navigator.onLine ? "online" :"offline"

After that, I need to create index.html file. As HTML5 standard, I need to follow the rule of HTML5.

view plain print about
1<!DOCTYPE HTML>
2<html manifest="/loc.manifest">

In attribute of html tag, I need to include manifest. Then, here is full coding of index.html.

view plain print about
1<!DOCTYPE HTML>
2<html manifest="/loc.manifest">
3<title>Local Storage</title>
4<invalidTag src="lc.js"></script>
5<body onload="ApponLoad()">
6I'm currently : <span id="mystatus"></span>
7<form name="myForm">
8    <input
9        type="Text"
10        name="entTask">
11    <input
12        type="Button"
13        name="btnSave"
14        value="Save"
15        onclick="AppType(document.myForm.entTask.value)">    
16    <input
17        type="Button"
18        name="btnDelete"
19        value="Delete"
20        onclick="AppClear();">
21</form>
22
23<fieldset>
24    <legend>My Task Lists</legend>
25    <div id="myTasks"></div>
26</fieldset>
27
28</body>
29</html>

Now, the main function of localStorage which is lc.js. Here is the full coding of lc.js.

view plain print about
1function ApponLoad()
2{
3    var myStatus = navigator.onLine ? "<b>online</b>" : "<b>offline</b>";
4    document.getElementById("mystatus").innerHTML = myStatus;
5    var getLocal = localStorage.getItem("localtask");
6    document.getElementById("myTasks").innerHTML = getLocal;
7}
8
9function AppType(txtTask)
10{
11    try {        
12        
13        //get localStorage data
14        var getL = localStorage.getItem("localtask");
15        if (getL == null) getL = "";
16            
17        document.getElementById("myTasks").innerHTML = txtTask + "<br>" + getL;
18        var setLocal = txtTask + "<br>" + getL;
19        
20        //saves to the database, "key", "value"
21        localStorage.setItem("localtask", setLocal);
22        document.myForm.entTask.value = "";
23        
24    } catch (e) {
25          if (e == QUOTA_EXCEEDED_ERR) {
26              //If over quota
27               alert('Quota exceeded!');
28        }
29    }
30}
31
32function AppClear()
33{
34    //deletes the localStorage data
35    localStorage.removeItem("localtask");
36    document.getElementById("myTasks").innerHTML = "";
37}

If you want to test as DEMO, Here is link.

http://www.ppshein.net/examples/local/index.html

This entry was posted on March 13, 2011 at 7:40 PM and has received 3448 views. There are currently 2 comments. Print this entry.