web 存储方式：Cookies,Session, Web SQL; Web Storage(LocalStorage ,SessionStorage),IndexedDB,Application

web 存储方式：Cookies,Session, Web SQL; Web Storage(LocalStorage ,SessionStorage),IndexedDB,Application

web 存储方式汇总：

旧的方式:

Cookies;

Session;

Web SQL;

新的方式 HTML5 :

Web Storage(LocalStorage ,SessionStorage);

IndexedDB;

Application Cache;

Cache Storage ?

 

1

1

1

Cookies

https://www.w3.org/TR/csp-cookies/

Content Security Policy: Cookie Controls

W3C First Public Working Draft, 15 December 2015

https://html.spec.whatwg.org/multipage/webstorage.html#storage

demo:

1.  
   document.cookie = "key=value";
2.  
   document.cookie = "key=value; domain=example.com";
3.  
    
4.  
   document.cookie = "key=value; secure";
5.  
   document.cookie = "key=value";
6.  
   document.cookie = "key=value; domain=example.com; secure";

1

Session

https://html.spec.whatwg.org/multipage/browsers.html#dom-history-pushstate

HTML

Living Standard — Last Updated 1 September 2016

https://html.spec.whatwg.org/multipage/webstorage.html#storage

https://html.spec.whatwg.org/multipage/indices.html#event-pageshow

https://www.w3.org/TR/WD-session-id

Session Identification URI

W3C Working Draft WD-session-id-960221

demo:

//session demo ???

1

Web SQL

https://www.w3.org/TR/webdatabase/

Web SQL Database

W3C Working Group Note 18 November 2010

 

Beware.

This specification is no longer in active maintenance and the Web Applications Working Group does not intend to maintain it further.

demo:

1.  
   function prepareDatabase(ready, error) {
2.  
   return openDatabase('documents', '1.0', 'Offline document storage', 5*1024*1024, function (db) {
3.  
   db.changeVersion('', '1.0', function (t) {
4.  
   t.executeSql('CREATE TABLE docids (id, name)');
5.  
   }, error);
6.  
   });
7.  
   }
8.  
    
9.  
   function showDocCount(db, span) {
10.  
    db.readTransaction(function (t) {
11.  
    t.executeSql('SELECT COUNT(*) AS c FROM docids', [], function (t, r) {
12.  
    span.textContent = r.rows[0].c;
13.  
    }, function (t, e) {
14.  
    // couldn't read database
15.  
    span.textContent = '(unknown: ' + e.message + ')';
16.  
    });
17.  
    });
18.  
    }
19.  
     
20.  
    prepareDatabase(function(db) {
21.  
    // got database
22.  
    var span = document.getElementById('doc-count');
23.  
    showDocCount(db, span);
24.  
    }, function (e) {
25.  
    // error getting database
26.  
    alert(e.message);
27.  
    });

1

1

out of date: ...

VS

new & fashion & popular:  HTML5

1

1

Web Storage  (LocalStorage ,SessionStorage)

https://www.w3.org/TR/webstorage/

Web Storage (Second Edition)

W3C Recommendation 19 April 2016

https://html.spec.whatwg.org/multipage/webstorage.html#storage

(LocalStorage)

demo:

1.  
   function lStorage(){
2.  
   //localStorage
3.  
   var ls = localStorage.getItem("ls");
4.  
   if (ls === "localStorage") {
5.  
   console.log("localStorage.getItem success!");
6.  
   } else {
7.  
   ls = localStorage.setItem("ls","localStorage");
8.  
   console.log("localStorage.setItem success!");
9.  
   }
10.  
    };
11.  
    lStorage();

(SessionStorage)

demo:

1.  
   function sStorage(){
2.  
   //sessionStorage
3.  
   var ss = sessionStorage.getItem("ss");
4.  
   if (ss === "sessionStorage" ) {
5.  
   console.log("sessionStorage.getItem success!");
6.  
   } else {
7.  
   ss = sessionStorage.setItem("ss","sessionStorage");
8.  
   console.log("sessionStorage.setItem success!");
9.  
   }
10.  
    };
11.  
    sStorage();

1

IndexedDB

https://www.w3.org/TR/IndexedDB/

Indexed Database API

W3C Recommendation 08 January 2015

demo:

1.  
   var request = indexedDB.open("library");
2.  
    
3.  
   request.onupgradeneeded = function() {
4.  
   // The database did not previously exist, so create object stores and indexes.
5.  
   var db = request.result;
6.  
   var store = db.createObjectStore("books", {keyPath: "isbn"});
7.  
   var titleIndex = store.createIndex("by_title", "title", {unique: true});
8.  
   var authorIndex = store.createIndex("by_author", "author");
9.  
    
10.  
    // Populate with initial data.
11.  
    store.put({title: "Quarry Memories", author: "Fred", isbn: 123456});
12.  
    store.put({title: "Water Buffaloes", author: "Fred", isbn: 234567});
13.  
    store.put({title: "Bedrock Nights", author: "Barney", isbn: 345678});
14.  
    };
15.  
     
16.  
    request.onsuccess = function() {
17.  
    db = request.result;
18.  
    };

1

Application cache 

https://www.w3.org/TR/html5/browsers.html#application-cache

Offline web applications

https://html.spec.whatwg.org/multipage/browsers.html#offline

demo:

1.  
   CACHE MANIFEST
2.  
    
3.  
   /main/home
4.  
   /main/app.js
5.  
   /settings/home
6.  
   /settings/app.js
7.  
   http://img.example.com/logo.png
8.  
   http://img.example.com/check.png
9.  
   http://img.example.com/cross.png

more ...

https://www.w3.org/TR/html5/browsers.html#offline

5.7 Offline Web applications

https://www.w3.org/TR/html5/browsers.html#appcache

5.7.2 Application caches

https://www.w3.org/TR/html5/browsers.html#application-cache-api

An application cache is a set of cached resources consisting of:

https://www.w3.org/TR/html5/browsers.html#application-cache

5.7.9 Application cache API

https://www.w3.org/TR/html5/webappapis.html#webappapis

6 Web application APIs

Cache Storage ???

http://caniuse.com/#search=Cache%20Storage

0 results found.

https://www.w3.org/TR/offline-webapps/

Offline Web Applications

W3C Working Group Note 30 May 2008

w3c others

https://www.w3.org/TR/XMLHttpRequest/

XMLHttpRequest Level 1

W3C Working Draft 30 January 2014

https://www.w3.org/TR/websockets/

The WebSocket API

W3C Candidate Recommendation 20 September 2012

https://www.w3.org/TR/mobile-bp/

Mobile Web Best Practices 1.0

Basic Guidelines

W3C Recommendation 29 July 2008

https://www.w3.org/TR/cors/

Cross-Origin Resource Sharing

W3C Recommendation 16 January 2014