html5 storage and browser storage

Post on 27-Nov-2014

1.365 Views

Category:

Technology

0 Downloads

Preview:

Click to see full reader

DESCRIPTION

 

TRANSCRIPT

HTML5 Storage and Local Storage

Sway Deng(@swaydeng)

2011-1-14

Cookie is our favorite, but……

Cookies:

• The size of storage space is small• The number of key-value pair is

limited• are included with every HTTP

request, slowing down web apps.

What we need:

• A lot of storage space• On the client,not included with every

HTTP request• That persists beyond a page refresh

What we already have:

• userData(IE)• Local Shared Objects(Adobe)• Gears(Google)

userData

Some code source…

userData

• available only in the same directory and with the same protocolno allowance for increasing space

• Depends on security settings

Intranet(Max)

Restricted(Min)

Document Limit(KB)

512 64

Domain Limit(KB) 10240 640

Local Shared Objects

Local Shared Objects

• Customize storage space( default:100K)

• Same domain• Cross-browser

But Google has say goodbye to Gears

• HTML5 is more attractive

• Gears is not that popular

• We don’t need a duplicate

HTML5 Storage

Web Storage

Indexed Database

Offline Web Application

s

Web SQL Database

Web Storage

Web Storage support

Web Storage

interface Storage { readonly unsigned long length; DOMString key(index); any getItem(key); void setItem(key, value); void removeItem(key); void clear(); };

Web Storage

Web Storage

Remove data

Web Storage

• Storage event• sessionStorage• Limitations(permission,storage

space)

Web SQL Database

Web SQL Database support

Web SQL Database

Three core methods:

1. openDatabase2. transaction (?)3. executeSql

Demo

Web SQL Database

• Browser vendors don’t support it widely

• Inelegant solution• The specification is illegible• A better solution is already there

Why Web SQL DB is going to die?

Indexed Database

• Object based storage• NoSQL-Style(structured storage)• asynchronous APIs (synchronous APIs

later)

Open and set up a DB

Store data in DB

Indexed Database

• The answer is No!• But it is coming soon

Can we use now ?

Indexed Database

Offline Web Applications

• A solution for offline web apps

demo

Offline Web Applications

• Server side– addType text/cache-manifest .manifest

• Client side

<!DOCTYPE html> <html manifest="sample.manifest">

CACHE MANIFEST# revision 630../halma-localstorage.jscss/layout.css images/sofish.png

NETWORK:# assets that available only when online: sample.json

FALLBACK: notfound.html

Offline Web Applications

• Event– online– offline

Usage

• Customize your web(like customize google menu, store large numbers of video list etc.)

• Cache static assets( css,js,images)

Problem

• Security• Storage space management

The end

top related