reading-notes

           Welcome to Read: 13

Read: 13 - “Local Storage”

In this Read: 13, I will talk only about:

• Local Storage.
  
  

Local Storage
What is the Local Storage?
The operating system typically provides an abstraction layer for storing and retrieving application-specific data like preferences or runtime state. These values may be stored in the registry, INI files, XML files, or some other place according to platform convention. If your native client application needs local storage beyond key/value pairs, you can embed your own database, invent your own file format, or any number of other solutions.
Historically, web applications have had none of these luxuries. 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 they have three potentially dealbreaking downsides:

• Cookies are included with every HTTP request, thereby slowing down your web application by needlessly transmitting the same data over and over.
  

• Cookies are included with every HTTP request, thereby sending data unencrypted over the internet (unless your entire web application is served over SSL)
  

• Cookies are limited to about 4 KB of data — enough to slow down your application (see above), but not enough to be terribly useful
  

• What we really want is:
  

  • A lot of storage space.
    
  • On the client.
    
  • That persists beyond a page refresh.
    
  • Isn’t transmitted to the server.
    

HTML5 Storage
HTML5 Storage” is a specification named Web Storage, which was at one time part of the HTML5 specification proper, but was split out into its own specification for uninteresting political reasons. Certain browser vendors also refer to it as “Local Storage” or “DOM Storage.”
It’s 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, or what have you. 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 SUPPORT
  
  
  

• Check for HTML5 Storage
  

    function supports_html5_storage() {
        try {
            return 'localStorage' in window && window['localStorage'] !== null;
        } catch (e) {
            return false;
        }
    }
  

  OR
  

    if (Modernizr.localstorage) {
        // window.localStorage is available!
    } else {
        // no native support for HTML5 storage :(
        // maybe try dojox.storage or a third-party solution
    }
  

  
  USING HTML5 STORAGE
  HTML5 Storage is based on named key/value pairs. You store data based on a named key, 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, integers, 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.
  

interface Storage {
getter any getItem(in DOMString key);
 setter creator void setItem(in DOMString key, in any data);
 };    

TRACKING CHANGES TO THE HTML5 STORAGE AREA
If you want to keep track programmatically of when the storage area changes, you can trap the storage event. The storage event is fired on the window object whenever setItem(), removeItem(), or clear() is called and actually changes something. For example, if you set an item to its existing value or call clear() when there are no named keys, the storage event will not fire, because nothing actually changed in the storage area.

if (window.addEventListener) {
  window.addEventListener("storage", handle_storage, false);
} else {
  window.attachEvent("onstorage", handle_storage);
};  

• STORAGEEVENT OBJECT
  
  
  

For more information please see the reference [1].

Read	Title	ToGo
Read: 01	Introductory HTML and JavaScript
Read: 02	HTML Text, CSS Introduction, and Basic JavaScript Instructions
Read: 03	HTML Lists, CSS Boxes, JS Control Flow
Read: 04	HTML Links, CSS Layout, JS Functions
Read: 05	HTML Images; CSS Color & Text
Read: 06	JS Object Literals; The DOM
Read: 07	HTML Tables; JS Constructor Functions
Read: 08	More CSS Layout
Read: 09	Forms and Events
Read: 10	JS Debugging
Read: 11	Assorted Topics
Read: 12	Docs for the HTML canvas Element & Chart.js
Read: 13	Local Storage
Read: 14a	CSS Transforms, Transitions, and Animations
Read: 14b	What Google Learned About Teams