Code 201 Class 13 Reading Notes

Local Storage

Cookies were invented early in the web’s history, and indeed they can be used for persistent local storage of small amounts of data. But the have the below potentially dealbreaking downsides.

• Cookies are included with every HTTP request, slowing down your web app by needlessly transmitting the same data over and over.
  • Sending data unencrypted over the internet (unless your entire web application is served over SSL)
• Cookies are limited to about 4kb of data - enough tto slow down your application (see above), but not enough to be terribly useful

What we want is:

• a lot of storage space

• on the client

• that persists beyond a page refresh

• and isn’t transmitted to the server

HTML5 Storage

Also known has Web Storage, Local Storage, DOM Storage.

HTML5 Is a way for web pages to store named key/value pairs locally, within the client web browser. Like Cookies, this data persists even after you navigate away from the web site, close your browser tab, exit your browser, and more. Unlike cookies, this data is never transmitted to the remote web server (unless you go out of your way to send it manually).

HTML5 Storage is based on named key/value pairs. You store data based on a named kay, then you can retrieve that data with the same key. The named key is a string. The data can be any type supported by JavaScript, including strings, Booleans, intergers, or floats. However, the data is actually stored as a string. If you are storing and retrieving anything other than strings, you will need to use functions like parseInt() or parseFloat() to coerce your retrieved data into the expected JavaScript datatype.

“5 megabytes” is how much storage space each origin gets by default. You are just storing strings though, not data in its original format.

“QUOTA_EXCEEDED_ERR” is the exception that will get thrown if you exceed your storage quota of 5 megabytes.

HTML5 Storage in Action

With HTML5 storage, we can save the progres locally, withing the browser itself. If your browser supports HTML5 Storage, pages wil pick up exactly from the point you left off.

Beyond Named Key-Value Pairs: Competing Visions

HTML5 used to be finicky that one would have to work around, now you don’t have to as API has been standardized and implemented across all major browsers, platforms, and devices.

The Indexed Database API exposes what’s called an object store. An object store shares many concepts with a SQL database. There are “databases” with “records,” and each record has a set number of “fields”. Each field has a specific datatype, which is defined when the database is created. you can select a subset of records, then enumerate them with a “cursor”. Changes to the object store are handled within “transactions”.

<—BACK