HTML and CSS Reference
In-Depth Information
user's data for access while they're offline. The API for each is identical,
so this section concentrates on local storage and then provides a quick
comparison with session storage before finishing with a look at using
web storage in an offline application.
Local storage
For many years, the only option web authors have had for storing data
on the client has been cookies. These are small strings stored in the cli-
ent browser along with an expiry date and a key to reference them by.
They're then passed back by the browser along with any HTTP request
made to the server that set them.
Cookies are widely used—any website you visit that allows you
to log in or remembers your past activity or preferences is using
cookies to correlate each request you make with stored
information on the server, but they aren't without issues.
The local storage API s create a client-side key-value store so that data
doesn't have to be repeatedly fetched from the server. Cookies are useful
for tracking things like whether a user is logged on, but they've been
forced into a role where they end up storing a significant amount of data.
This is a problem because each request the browser makes contains the
full set of cookies it has. Local storage replaces cookies by providing a
simple in-browser service for associating keys with values. The data
stays in the browser and doesn't need to be sent back to the server.
This section builds a simple to-do list application using local storage.
First you need some markup for a text input and a button:
<input type="text" id="new_item">
<button onclick="add_item()">
Add
</button>
<ul id="todo_list">
</ul>
To add an item to the to-do list, the user must type a description into
the text input and click the Add button. When the user clicks Add,
Search WWH ::




Custom Search