HTML5 and CSS3, Second Edition

Tip 27

Tip 27. Saving Preferences with Web Storage

The Web Storage mechanism provides a simple method for developers to

persist data on the client’s machine using a name/value store built into the

web browser. With a very small amount of JavaScript, storing and retrieving

simple strings of data is a breeze. It’s one of the most widely available storage

application programming interfaces (APIs), implemented in Internet Explorer

8 and the old versions of iOS and Android browsers.

Data stored in Web Storage’s localStorage system persists between browser

sessions and can’t be read by other websites, because it’s restricted to the

domain you’re currently visiting. Just watch out when you’re developing

things locally. If you’re working on a local server, like localhost, for example,

you can easily get your variables mixed up and will have to constantly tell

the browser to clear the storage out.

AwesomeCo is in the process of developing a new customer-service portal and

wants users to be able to change the text size, background, and text color of

the site. Let’s implement that using Web Storage so that when we save the

changes, they persist from one browser session to the next. When we’re done,

we’ll end up with a prototype that looks like the following figure.

Figure 30—Our Preferences page

report erratum • discuss

Saving Preferences with Web Storage • 185

Download from Wow! eBook <www.wowebook.com>