HTML and CSS Reference
In-Depth Information
<li>Laptop</li>
<li>Posters</li>
<li>Small refrigerator</li>
</ol>
</section>
Now, your site visitors can interact with the text just as if they were typing it into a word processing
document, but without any formatting controls. You can add new list items at any point, remove
existing items, and even re-order the list by moving one item to another location. Because it is an
ordered list, the items are automatically renumbered.
You might find yourself thinking, “That's cool — but it'd be really great if the page would remember
what you wrote.” Well, thanks to another advanced HTML5 feature — local storage, covered in the
next section — it can.
Browser support for editable content is very widespread and includes:
➤
Internet Explorer 6.0+
➤
Firefox 3.5+
➤
Safari 3.2+
➤
Google Chrome 5.0+
➤
Opera 10.1+
LocaL sToraGe
Web pages are non-persistent or, in the programmer's parlance,
stateless
. A stateless page is one
that treats each request to view it as an independent one, unrelated to any previous request. This is
why, for the most part, web pages don't greet repeat visitors by name — that is, of course, unless the
web page stores a tiny bit of information (like a name) in a small file on the user's computer called
a
cookie
. Cookies are great for simple name/value pairs of information, for example,
visitor=Joe
,
but really limited in size. To overcome this problem and make it possible for each user to interact
with web pages persistently, an HTML5-related specification provides for local storage of text or
code that is saved in the user's browser. With the local storage option enabled on a web page, the
content editable example in the preceding section becomes much more useful because the personal-
ized list will always be available online for the site visitor.
To take advantage of the local storage ability, your code will need to have the following elements:
➤
A variable that is set to the
id
attribute of the area to be stored
A function that stores the text in the area, typically triggered by the
➤
blur
event handler, and
temporarily freezes the page by turning the
designMode
off
➤
A function that re-enables the page for editing when the editable area gets focus by turning
the
designMode
attribute on
A function that retrieves the stored content from the user's system and inserts it into the page
➤
in the editable area
