EMBEDDING OBJECTS AND STORING INFORMATION - HTML5 - page 315

&nbsp;State < br >
< input type =button onClick = “StorageMaster.setRegistration () ” value = “Register” >
< input type =button onClick = “StorageMaster.getReg () ” value = “Find Info” >
< input type =button onClick = “StorageMaster.clearReg () ” value = “Clear Data” >
</ form >
</section>
< br >
< pre id = “ profile ” ></ pre >
</ body >
</ html >
One of the features added to this example is the use of radio buttons to pass data to be stored.
Radio buttons are important because they make it easy for users to make a choice. It does take
a bit more work to get the correct data from radio buttons and check boxes, but it rel ects the
Web truism that the more work the developer does, the less work users have to do.
Another feature of local storage is that it's related to the browser. Each browser has its own
storage. So, if you store the data using a Safari browser, a Chrome browser cannot access that
data. Figure 15-5 shows the page loaded in a Chrome browser that has stored data using local
storage. However, if the same program in a dif erent browser (Opera, for example) attempts to
retrieve the data, it shows it to be null.
319
Figure 15-5: Accessing local storage data.
You may also notice that when you i rst load the program, you don't see the output window.
Instead, you see a gray line beneath the buttons. As soon as you click the Find Info button, the
information appears where the gray line was. A little CSS3 and HTML5 DOM work does the
trick. First, in the CSS3, set up the ID: