This section provides an overview of the toolkit's utilities for
managing cookies and the browser's Back buttonâtwo topics that are
quite common in any modern web application. Because both of these
topics are provided by Core, you must dojo.require them into the page before
trying to use them.
Because HTTP is a stateless protocol, as soon as a web server finishes serving up a page, it knows nothing else about you. While this aspect of the Web is magnificent in many respects, it is less than ideal for situations in which an application could personalize a page based upon preferences you've already defined. For example, it might be nice for a weather-related site to remember your zip code so that you don't have to enter it every single time you visit the page.
Cookies are a concept originally devised by Netscape that mitigate this kind of problem and give browsers a limited form of short-term memory. In short, web page designers can use JavaScript or server-side scripts to create a cookie that contains name-value pairs about your visit to the page. When you visit the page again, scripts can be used to fetch the cookie and dynamically affect your experience. Cookies generally have an expiration date and are always associated with the specific domain from which they originated.
One of the issues with managing cookies from pure JavaScript
is that you have to remember the somewhat strict syntax that is
expected and build up the string for yourself. For example, to set a
cookie for the default domain that consists of a name/value pair of
foo=bar with a particular
expiration date, you would do this:
document.cookie ='foo=bar; expires=Sun, 15 Jun 2008 12:00:00 UTC; path=/'
Of course, that's the easy part. When you want to read back
out cookie values, you get to parse the String yourself, which might contain lots
of name/value pairs.
Dojo provides a basic wrapper around cookie operations that's a lot easier to remember how to use. Table 2-6 outlines the basic API.
Table 2-6. dojo.cookie functions
Name | Comment |
|---|---|
| Acts as a "getter"
for a cookie value (returned as
If this is a number, it indicates the days from today at which the cookie expires; if a date, it provides the date past which the cookie expires (and if expires is in the past, the cookie is deleted); if expires is omitted or is 0, the cookie expires when the browser closes.
|
| Returns a |
For example, you might set and retrieve a cookie value like so:
dojo.cookie("foo","bar", {expires : 30});
//set a foo/bar key-value pair to expire 30 days from now
dojo.cookie("foo"); //get back the value for foo, which is barFor modern web applications, it is pretty much the norm that
the entire app lives in a single page that never reloads, and one
issue that immediately comes up is managing the Back button so that
your application can properly respond to state and potentially even
bookmarking. The Core module back
provides a simple utility that facilitates the state-tracking
portion of the work by allowing you to explicitly define states and
respond accordingly when the Back or Forward button is pressed.
Table 2-7 describes the API.
Table 2-7. dojo.back functions
Name | Comment |
|---|---|
| Needs to be called
from a |
| Used to define the
callback function that should be executed when the page
returns to its "first" state. In general, it is recommended
that this function be called first thing in |
| Provides a way of
establishing a particular state via the
|
Warning
Be consistent and use either Boolean values or String identifiers for the changeUrl property for the args Object that is passed to addToHistory.
Example 2-8 illustrates
a trivial usage of back to
produce callback functions that could provide custom behavior, which
hopefully gets the basic idea across. Note that the emphasized lines
inside of the body tags are necessary to ensure that IE behaves as
expected.
Tip
In case you're wondering why the SCRIPT that is included inside of the
BODY looks really awkward, it's
because of a specific problem with IE that requires a document.write to execute, which cannot
happen after the page loads. It's not elegant, but it does work
across all browsers and gets you Back button functionality.
Example 2-8. Example of Back button handling
<html>
<head>
<title>Fun with Back!</title>
<link rel="stylesheet" type="text/css"
href="http://o.aolcdn.com/dojo/1.1/dojo/resources/dojo.css" />
<script
type="text/javascript"
src="http://o.aolcdn.com/dojo/1.1/dojo/dojo.xd.js"
djConfig="dojoIframeHistoryUrl:'iframe_history.html',isDebug:true"
></script>
<script type="text/javascript">
dojo.addOnLoad(function( ) {
initialState = {
back: function( ) { console.log("Back to initial state"); }
};
state1 = {
back: function( ) { console.log("Back to state 1"); },
forward: function( ) { console.log("Forward to state 1"); },
changeUrl : true // could also be an id like "state1"
};
state2 = {
back: function( ) { console.log("Back to state 2"); },
forward: function( ) { console.log("Forward to state 2"); },
changeUrl : true // could also be an id like "state2"
};
//set the initial state and move forward two steps in history
dojo.back.setInitialState(initialState);
dojo.back.addToHistory(state1);
dojo.back.addToHistory(state2);
});
</script>
<head>
<body>
<script type="text/javascript"
src="http://o.aolcdn.com/dojo/1.1/dojo/back.js"></script>
<script type="text/javascript">dojo.back.init( );</script>
Press the back button and have a look at the console.
</body>
</html>Get Dojo: The Definitive Guide now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
