HTML 5 Web Storage

Web Storage

· Web storage – a new JavaScript-only API introduced in HTML5

o Stored per domain using key-value pairs

o Managed by the browser

o Uses client machines file storage; reading/writing using single threaded I/Os

o File size limit (recommendation by W3C 5 MB)

o localStorage object

§ For storing data that persists on the client machine between sessions

§ The data can be overwritten or cleared only by the application itself or by the user performing a manual clear down of the local storage area

o SessionStorage object

§ Won’t persist data between browser sessions

§ If the user closes the browser, the data is cleared immediately

· W3C recommends a limit of 5MB, but browsers are allowed to store more per domain.

· Should not be used for mission-critical application functions

· Using asynchronous communications via JavaScript to push the info to the server

· Two types of global web storage objects (key-value collections):

o localStorage object on the global window object

§ // window.localStorage

§ //localStorage.setItem(“bar”, foo);

§ // var foo = localStorage.getItem(“bar”);

§ // removeItem()

§ // clear()

o sessionStorage object on the global window object

§ //window.sessionStorage

· Window localStorage, MDN, Introduction to Web Storage, https://msdn.microsoft.com/en-us/library/bg142799(v=vs.85).aspx

Web Applications Using Web Storage

• Improving Performance of Mobile Web Applications

• Twitter social networking

• Offline-Enabled Cloud SaaS (Software as a Service)

o Gmail Mobile

References

• Text Book: Fundamentals of Web Development, 2015, by Randy Connolly and Ricardo Hoar, published by Pearson

• Internet & World Wide Web How To Program, 5^th ed, by Paul Deitel, Harvey Deitel, and Abbey Deitel, publisher Pearson

• HTTP State Management Mechanism, http://tools.ietf.org/html/rfc6265

• Web Storage, W3C Recommendation, June 09, 2015, http://www.w3.org/TR/webstorage

• Web Storage Test Suite, https://github.com/w3c/web-platform-tests/tree/master/webstorage

• HTML Local Storage Objects, http://www.w3schools.com/html/html5_webstorage.asp

• 9 JavaScript Libraries for Working with Local Storage, http://www.sitepoint.com/9-javascript-libraries-working-with-local-storage/

• HTML5 Demo, http://html5demos.com/storage

• “Chapter 7 The Past, Present, and Future of Local Storage for Web Applications,” HTML5 Up and Running, by Mark Pilgrim, Publishers O’Reilly/Google Press, http://shop.oreilly.com/product/9780596806033.do ; Aurthor’s Web site, http://diveintohtml5.info/

• “5. Mobile Application: Client Storage and Offline Execution,” HTML5 in Action, by Rob Crowther, Joe Lennon, Ash Blue, and Greg Wanish, publisher Manning, https://www.manning.com/books/html5-in-action

• “Hack 54 Use the WebStorage to Persist User Data,” HTML5 Hacks, by Jesse Cravens & Jeff Burtoft, publisher O’Reilly, https://github.com/html5hacks

• Creating Mobile Web Applications with HTML 5: Part 1. Combine HTML5, Geolocation APIs, and Web Services to Create Mobile Mashups, http://www.ibm.com/developerworks/library/x-html5mobile1/

• Creating Mobile Web Applications with HTML 5: Part 2. Unlock local storage, http://www.ibm.com/developerworks/library/x-html5mobile2/

• A New version of SaaS for areas with Internet Connectivity Challenges, http://craigappl.github.io/Offline-Enabled-SAAS-Systems/

• How to clear Web Storage in your browser of choice, http://www.ghacks.net/2015/02/05/how-to-clear-web-storage-in-your-browser-of-choice/

• Introduction to Web Storage, https://msdn.microsoft.com/en-us/library/bg142799(v=vs.85).aspx

HTML5 Web Storage Examples

Listing13.08.html

<h1>Web Storage Writer</h1>

if (typeof (localStorage) === "undefined" || typeof (sessionStorage) === "undefined") {

alert("Web Storage is not supported on this browser...");

}

else {

sessionStorage.setItem("TodaysDate", new Date());

sessionStorage.FavoriteArtist = "Matisse";

localStorage.UserName = "Ricardo";

document.write("web storage modified");

}

</script>

<p><a href="Listing13.09.html">Go to web storage reader</a></p>

</form>

Favorite Twitter Searches, http://test.deitel.com/iw3htp5/ch11/fig11_20-22/FavoriteTwitterSearches.html

<!DOCTYPE html>

<html>

<head>

<title>Twitter Searches</title>

</head>

<h1>Favorite Twitter Searches</h1>

<p><input id = "query" type = "text"

placeholder = "Entery Twitter search query">

Twitter search operators</a></p>

<input type = "button" value = "Save"

onclick = "saveSearch()">

<input type = "button" value = "Clear All Saved Searches"

onclick = "clearAllSearches()"></p>

</form>

<h1>Previously Tagged Searches</h1>

</body>

</html>

<!--

**************************************************************************

* *

* DISCLAIMER: The authors and publisher of this book have used their *

* best efforts in preparing the book. These efforts include the *

* development, research, and testing of the theories and programs *

* to determine their effectiveness. The authors and publisher make *

* no warranty of any kind, expressed or implied, with regard to these *

* programs or to the documentation contained in these books. The authors *

* and publisher shall not be liable in any event for incidental or *

* consequential damages in connection with, or arising out of, the *

* furnishing, performance, or use of these programs. *

**************************************************************************

-->

// Fig. 11.19: FavoriteTwitterSearchs.js

// Storing and retrieving key-value pairs using

// HTML5 localStorage and sessionStorage

var tags; // array of tags for queries

// loads previously saved searches and displays them in the page

function loadSearches()

{

if ( !window.sessionStorage.getItem( "herePreviously" ) )

{

sessionStorage.setItem( "herePreviously", "true" );

document.getElementById( "welcomeMessage" ).innerHTML =

"Welcome to the Favorite Twitter Searches App";

} // end if

var length = localStorage.length; // number of key-value pairs

tags = []; // create empty array

// load all keys

for (var i = 0; i < length; ++i)

{

tags[i] = localStorage.key(i);

} // end for

tags.sort(); // sort the keys

var markup = "<ul>"; // used to store search link markup

var url = "http://search.twitter.com/search?q=";

// build list of links

for (var tag in tags)

{

var query = url + localStorage.getItem(tags[tag]);

markup += "<li><span><a href = '" + query + "'>" + tags[tag] +

"</a></span>" +

"<input id = '" + tags[tag] + "' type = 'button' " +

"value = 'Edit' onclick = 'editTag(id)'>" +

"<input id = '" + tags[tag] + "' type = 'button' " +

"value = 'Delete' onclick = 'deleteTag(id)'>";

} // end for

markup += "</ul>";

document.getElementById("searches").innerHTML = markup;

} // end function loadSearches

// deletes all key-value pairs from localStorage

function clearAllSearches()

{

localStorage.clear();

loadSearches(); // reload searches

} // end function clearAllSearches

// saves a newly tagged search into localStorage

function saveSearch()

{

var query = document.getElementById("query");

var tag = document.getElementById("tag");

localStorage.setItem(tag.value, query.value);

tag.value = ""; // clear tag input

query.value = ""; // clear query input

loadSearches(); // reload searches

} // end function saveSearch

// deletes a specific key-value pair from localStorage

function deleteTag( tag )

{

localStorage.removeItem( tag );

loadSearches(); // reload searches

} // end function deleteTag

// display existing tagged query for editing

function editTag( tag )

{

document.getElementById("query").value = localStorage[ tag ];

document.getElementById("tag").value = tag;

loadSearches(); // reload searches

} // end function editTag

// register event handlers then load searches

function start()

{

var saveButton = document.getElementById( "saveButton" );

saveButton.addEventListener( "click", saveSearch, false );

var clearButton = document.getElementById( "clearButton" );

clearButton.addEventListener( "click", clearAllSearches, false );

loadSearches(); // load the previously saved searches

} // end function start

window.addEventListener( "load", start, false );

/*************************************************************************