HTML and CSS Reference
In-Depth Information
storage size limitations of cookies at 4 kilobytes. The data stored is domain-restricted; which means the browser's
sessionStorage
object information is only readable to the domain that initially placed that data.
■
Note
If the user has multiple windows opened at the same site, each one will have its own
sessionStorage
object.
localStorage
Since I am a Mac user, I use Command+Tab like crazy; for Windows users, it would be Ctrl+Tab. It provides an easy
way to switch between multiple windows/applications on my machine, and if you're like me, you'll more than likely
hit Command+Q or Ctrl+Q, which quits the application, by mistake a few times. (There's almost nothing more
frustrating than having your finger slip and selecting Q instead of Tab as you're filling out a large form on the Web!
Now with
localStorage
, developers can help out users by saving the entries they made to text fields on the
form. In this case, if I quit, which I inadvertently do pretty often, I can go back to the site after I restart my browser
and pick up where I left off. This is hugely beneficial to a user's experience. The driving technology behind this is
localStorage
, which allows developers to save data that are persistent to the browser, enough so that if the user
closes and reopens the browser, that data will remain, and a developer can retrieve the data at a later time.
As noted,
localStorage
is saved with no browser expiration date applied. That is, it's there forever, unless the
developer clears or modifies it or the user deletes the browser application entirely or clears all the browser memory.
Whether you're using
sessionStorage
or
localStorage
, the syntax is identical for storing and retrieving
values—as is shown in the following example, where the user's name is stored.
localStorage.setItem("userName", "John");
or
sessionStorage.setItem("userName", "John");
Let's look at working with
localStorage
in an ad unit. In Listing 6-5, the user is prompted to enter his or her
name; then the name value goes into the
localStorage object
, which allows the ad to use the name in the ad's text
even if the user sees the ad at a later time and on another publisher site.
Listing 6-5.
LocalStorage API Example
<!DOCTYPE HTML>
<html>
<head>
</head>
<style>
* {
margin: 0px;
padding: 0px;
position: relative;
font-family: Verdana;
}
#ad {
position: relative;
top: 0px;
left: 0px;
width: 300px;
height: 250px;
