ASP.NET and HTML5 Local Storage
With HTML 5, web pages can store data locally within the user's browser. Earlier, this was done with cookies. However, Web Storage is more secure and faster. The data is not included with every server request, but used only when asked for. It is also possible to store large amounts of data, with affecting the website's performance. The data is stored in Key/Value pairs, and a web page can only access data stored by itself.
HTML5 storage support is designed for two key scenarios. First, it enables a site to work offline. A second feature of HTML5 storage is the ability to provide a local cache for data generally on the server but not subject to frequent change.
There are two new objects for storing data on the client:
- localStorage - stores data with no expiration date
- sessionStorage - stores data for one session
LocalStorage is designed as a long-term storage mechanism for data that spans sessions and time, and provides a mechanism for longer-term storage of data. LocalStorage is great for relatively static files or database tables, to increase performance when the data is needed and to potentially offer offline versions of the data.
In contrast, SessionStorage is only persistent for the life of a particular user session. As a result, two simultaneous sessions from the same machine wouldn't be able to share SessionStorage data, making SessionStorage more suitable for temporary session-specific states, such as caching data related to a game state.
One final important concern is browser support. All the major browsers include support for HTML5 storage, including Firefox 3.5, Safari 4, Internet Explorer 8 and Chrome 4. For Browsers' older versions compatiblity checking, before using web storage, check browser support for the localStorafe and sessionStorage:
{
// Yes! localStorage and sessionStorage support!
// Some code.....
}
else
{
// Sorry! No web storage support..
}
The essentials are a localStorage property on the JavaScript Window object.
<!DOCTYPE html>
<html>
<body>
<div id="result"></div>
<script>
if(typeof(Storage)!=="undefined")
{
localStorage.lastname="Smith";
sessionStorage.lastname="Bill";
document.getElementById("result").innerHTML="Welcome " + localStorage.lastname + " & " + sessionStorage.lastname;
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";
}
</script>
</body>
</html>
Click F12 using chrome and click on Resources TAB. You can see Local Storage and Session Storage where Data is stored in Key/Value pairds. Notes that each web site has its own storafe area.
NOTE: A key behavior to note with HTML5 storage is that it only works with strings. Attempting to store anything other than a string will call toString implicitly and store the result. This is true for data types as simple as Date, or more complex ones like arrays.
This significantly complicates storing data in HTML5 storage, because it requires serializing all data into a string for storage and de-serializing it back out again when retrieving the data. For this reason, it's helpful to provide a simple wrapper around the HTML5 storage, one that automatically handles the serialization to and from a string. Fortunately, this is exactly what JSON is designed to do, so we can rely on this mechanism for storing data. The JSON serialization functionality can be found here; this is natively supported by the latest versions of the major browser, however, so no explicit reference is required.
Unfortunately, the amount of space available to HTML5 storage varies from browser to browser. This results in the need to check for exceptions related to exceeding the storage capacity.
try
{
window.localStorage.name =JSON.stringify(value)
}
catch (exception)
{
if ((exception != QUOTA_EXCEEDED_ERR) &&
(exception != NS_ERROR_DOM_QUOTA_REACHED))
{
throw exception;
}
}
Worth mentioning are two other functions on window.localStorage: clear and removeItem(name).
Comments
Post a Comment