Loading presentation...

Present Remotely

Send the link below via email or IM


Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.


Browser Storage

Browser Storage presentation for the Salt Lake ColdFusion User Group. April 2013.

Nathaniel Lord

on 9 July 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Browser Storage

Browser Storage What Types? Web Storage IndexedDB WebSQL WebSQL Let's get it out of the way. Browser Support W3C Should I Use It? No! If you must use it, here are some links: WebSQL Specification
http://www.w3.org/TR/webdatabase/ Conversion from WebSQL to IndexedDB
http://www.html5rocks.com/en/tutorials/webdatabase/websql-indexeddb/ SQLite Site
http://www.sqlite.org/ COOKIES!!! Cookies Derived from Magic Cookie...according to Wikipedia Cookie Types Session Persistent Secure HttpOnly Third-party Supercookie Zombie A cookie that persists while browsing on a site.

If no expiration date is specified, the cookie defaults to a session cookie.

Session cookies are deleted when the browser closes. A new type of cookie to help with security.

Only used in http requests

Cannot be accessed by Javascript A cookie that is recreated after the user deletes it.

Can be regenerated using javascript from other browser storage methods when the cookie isn't detected Used mostly in tracking and advertising.

Cookie that doesn't match the url of the site used to create the cookie Not really all that super. Blocked by browsers.

A cookie that represents a top-level domain
ex: .com, .net, .org, etc.

Overrides cookies for all domains using that tld Can only be transmitted using HTTPS

Ensures contents are always encrypted Live for the specified amount of time

Great for information that doesn't change and needs to stay in the browser Limitations Different browsers have different cookie count limitations.

For my home computer:
Internet Explorer : 50 cookies or 10234 character limit per domain.
Chrome: 180 Cookies at 4096 bytes each.
Firefox: 150 at 4097 bytes each.

Storing objects and large amounts of data isn't practical for cookies

Cookies are sent with every http request. Sending javascript variables stored in cookies in every http request isn't a good idea. Cookies in ColdFusion Accessed via the COOKIE scope.
Used for session management.
Should always use HTTPOnly Cookies for Session Management
Create cookies using cfcookie
Attributes: Name, Domain, Expires, Path, Secure, Value, HTTPOnly
The HTTPOnly, and Secure attributes can be set by default in the ColdFusion Administrator or the Application.cfc
Setting expires="NOW" deletes cookie when the response is processed (NOT Unique to ColdFusion) Web Storage localStorage sessionStorage On to the good stuff... Browser Support Why aren't I using this? I dont' know... Uses What can I use it for?
Template elements such as a menu, a username, user preferences.
When should I use it?
The browser needs any data that needs to be used across multiple pages.
Form data needs to be saved in the browser.
Data needs to persist across user sessions (localStorage only).
Why should I use it?
Data is immediately accessible in other browser tabs on the same site. This also includes iFrames. PLEASE never use iFrames.
Decreases requests to server. How is it used? IndexedDB Indexed key-value store for browsers Conclusion Storage Interface Both localStorage and sessionStorage are instances of the storage interface.
sessionStorage disappears when the tab is closed. Opening a new tab creates a new sessionStorage instance for that tab.
localStorage persists until deleted. Storage interface definition Setting Data In browsers that support localStorage and sessionStorage there are window variables named localStorage and sessionStorage.

While data can be set directly, it's recommended that the getter and setter methods be used.

localStorage is the same as window.localStorage
localStorage.myData='Yes' is the same as localStorage.set('myData','Yes');

All data sent to the Storage interface has the .toString() method run on it.

{name:"Nate",awesome:true} becomes "[object Object]"

To preserve objects stringify them with JSON before saving. Getting Data Retrieve data using the getter function. Data can be accessed directly as a property of the storage instance.

The two lines below return the same response:

Simple! What's Next? That's is. It really is that simple. If you're not using it you should immediately. No extra setup, just store and retrieve from already existing interfaces in the window.

What if I need to support a browser that doesn't have this interface?

There are simple scripts available on the web that will create these interfaces for you and mock the functionality using cookies. They're severely limited by the size of cookies, but they provide a decent fall-back. Browser Support Uses and Limitations Uses Limitations Firefox: No limit on db size. Ask for user permission on blobs larger than 50 MB.

Chrome: 20% of the shared pool. The shared pool is 50% of available disk space. When the shared pool is full, the least used host has its information wiped.

Internet Explorer: 250MB. Offline Web Applications
Chrome Extensions
Image Manipulation
Media Library
To Do Lists
Notepad What is it? IndexedDB is an asynchronous transactional key-value data store.

asynchronous : Callback functions are required to retrieve the result of a request. Much like XHR.

transactional : handles data operations in transactions

key-value : Very simple storage where every element is referenced by an indexed id Elements of IndexedDB Database : Self-explanatory. Has a version associated with it to allow for upgrades
Transaction: This is an object that determines the scope of a transaction.
Request: The object that sends the request to the database.
ObjectStore: Equivalent to a table. Contains the key and the value. Based on the structure of the keys, the store can either handle Javascript objects or any value. Events IDBTransaction
complete IDBRequest
success IDBDatabase
upgradeneeded Because IndexedDB is asynchronous, you must handle these events to get any information back. Methods IDBDatabase
close() IDBFactory
cmp() IDBObjectStore
put() IDBTransaction
abort() DEMO Why should I use it? When you combine the storage of IndexedDB with WebSockets for communication, you can have a highly responsive web application with low server load. Web storage technologies are rapidly evolving to meet the needs of modern web applications. With an increase in the number of browser based applications and the ability to run applications offline, web storage allows developers to create rich applications without the need to create desktop software. Questions?
Full transcript