localStorage sessionStorage 和cookie等前端存儲方式總結

localStorage sessionStorage 和cookie localStorage localStorage是本地存儲的,除非清空本地數據 localStorage不會自動把數據發給伺服器，僅在本地保存。 localStorage只能存字元串,任何類型存儲的時候都會被自動轉換成字元串 ...

localStorage sessionStorage 和cookie

localStorage

localStorage是本地存儲的,除非清空本地數據
localStorage不會自動把數據發給伺服器，僅在本地保存。

localStorage只能存字元串,任何類型存儲的時候都會被自動轉換成字元串

使用方式(localStorage是window的屬性)

設置localStorage鍵值對

localStorage.name = 'zhangsan';//存儲一個鍵值對

localStorage.name = 'lisi';//name新值會覆蓋舊值

localStorage['年齡'] = 23;//key是中文就使用這種方式

localStorage['404'] = '你迷路了';//key是數字就用這種方式

localStorage.setItem('email','[email protected]');//使用setItem函數創建一個鍵值對
根據localStorge鍵取用值

console.log(localStorage.name);
console.log(localStorage['年齡']);
console.log(localStorage['404']);
console.log(localStorage.getItem('name'));
//通過key()函數獲取鍵值對中的key
console.log(localStorage.key(index));
清除localStorage

//清除特定的鍵值對
console.log(localStorage.removeItem('name'));//清除name的值
//清除所有鍵值對
localStorage.clear();

sessionStorage

sessionStorage只伴隨著session，視窗一旦關閉就沒了
sessionStorage不會自動把數據發給伺服器，僅在本地保存。
sessionStorage不在不同的瀏覽器視窗中共用，即使是同一個頁面

localStorage只能存字元串,任何類型存儲的時候都會被自動轉換成字元串

使用方式(localStorage是window的屬性)

設置,取值,清除都和localStorage完全一樣

Web SQL Database

簡介

Web SQL DatabaseAPI實際上未包含在HTML 5規範之中，它是一個獨立的規範，它引入了一套使用SQL操作客戶端資料庫的API，這些API有同步的，也有非同步的，同步版本的API只在工作線程（Worker Threads）上有用，由於並不是所有的瀏覽器都支持工作線程，一般情況下，都會使用非同步API。它的核心方法有三個：openDatabase，transaction和executeSql。這些API已經被廣泛的實現在了不同的瀏覽器里，尤其是手機端瀏覽器。雖然W3C官方在2011年11月聲明已經不再維護Web SQL Database規範，但由於其廣泛的實現程度，瞭解這些API對 Web開發還是非常有必要的

Web SQL Database核心方法介紹
- openDatabase()方法打開一個已經存在的資料庫連接，如果資料庫不存在，則創建一個新的數資料庫
```
var db = openDatabase('mydb','1.0','my database',1024*1024);
```
  4個參數的意義（資料庫名、版本號、資料庫說明、資料庫大小單位byte(資料庫大小可變)、創建回滾）
  註意:如果資料庫已經創建，第五個參數將會進行回滾操作。如果省略此參數，仍能創建
- 用database.transaction()方法執行SQL語句,該函數只有一個參數是負責執行查詢的函數
- 查詢函數有一個事務類型的參數tx
- 事務參數tx具有一個函數:executeSql(),這個函數有4個參數
  1. 表示查詢的SQL字元串
  2. 插入到查詢SQL字元串中問號所在處的字元串參數
  3. 查詢執行成功時執行的函數
  4. 查詢失敗時執行的函數
  5. 執行成功的函數有兩個參數:tt,事務性參數;result,執行的返回結果
  6. 執行錯誤的函數也有兩個:tt,事務性參數,error,錯誤的對象
```
實例:
var db = openDatabase('mydb','1.0','my database',1024*1024);
if (db) {} //可以判斷是否成功連接上資料庫
db.transaction(function(tx) {
    //創建一個表
    tx.executeSql('create table if not exists accountTab(name TEXT,age INTEGER,email TEXT)',[],
    function() {},
    function(tx,error) {
        console.log(error.source + ':' +error.message);//遇到錯誤列印出錯誤信息
    });
    //插入數據
    tx.executeSql('insert into accountTab values(?,?,?)',['zhangsan',23,'[email protected]']);
    //查詢數據
    tx.executeSql('select * from accountTab',[],function(tt,rs) {
        //迴圈結果集
        for(var i = 0; i < rs.rows.length;i++) {
            console.log(rs.rows);//輸出結果集
        }
    });

});
```

cookie數據始終在同源的http請求中攜帶（即使不需要）,即cookie在瀏覽器和伺服器間來回傳遞
cookie數據還要路徑(path)的概念,可以限制cookie只屬於某個路徑下
存儲大小有限制,cookie數據不能超過4K,因為每次http請求都會攜帶cookie,所以cookie適合保存很小的數據
sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大
cookie只在設置的cookie過期時間之前一直有效，即使視窗或瀏覽器關閉

cookie的應用

保存用戶登錄狀態:例如將用戶id存儲於一個cookie內，這樣當用戶下次訪問該頁面時就不需要重新登錄了，現在很多論壇和社區都提供這樣的功能。 cookie還可以設置過期時間，當超過時間期限後，cookie就會自動消失
定製頁面。如果網站提供了換膚或更換佈局的功能，那麼可以使用cookie來記錄用戶的選項，例如：背景色、解析度等。當用戶下次訪問時，仍然可以保存上一次訪問的界面風格。
創建購物車。正如在前面的例子中使用cookie來記錄用戶需要購買的商品一樣，在結賬的時候可以統一提交。例如淘寶網就使用cookie記錄了用戶曾經瀏覽過的商品，方便隨時進行比較

傳遞方式
- cookie數據始終在同源的http請求中攜帶（即使不需要），即cookie在瀏覽器和伺服器間來回傳遞
- sessionStorage和localStorage不會自動把數據發給伺服器，僅在本地保存
數據大小
- cookie數據還有路徑（path）的概念，可以限制cookie只屬於某個路徑下
- 存儲大小限制也不同，cookie數據不能超過4k，同時因為每次http請求都會攜帶cookie，所以cookie只適合保存很小的數據
- sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大
數據有效期
- sessionStorage：僅在瀏覽器視窗(或者標簽頁)關閉前有效(即:視窗關閉之前滿足同源策略下都有效果)
  - 所以你刷新這個頁面前進後退(前進後退得保證同源策略)
- localStorage：始終有效，視窗或標簽頁關閉也一直保存(除非主動刪除數據)，因此用作持久數據
- cookie只在設置的cookie過期時間之前一直有效，即使視窗或瀏覽器關閉
作用域不同
- sessionStorage每個視窗的值都是獨立的（每個視窗都有自己的數據），它的數據會隨著視窗的關閉而消失，視窗間的sessionStorage也是不可以共用的(就是,你再打開一個標簽頁,同樣的地址,也不會共用)
- localStorage 在所有同源頁面中都是共用的(前提是相同瀏覽器,別一個是谷歌瀏覽器,一個火狐瀏覽器,然後打開同一個頁面說不是共用的哈哈)也就是能跨頁不能跨域
- cookie也是在所有同源視窗中都是共用的
cookie的封裝,我推薦大家使用cookie相關的插件(當然有時間也可以自己封裝,網上也很多)

http://www.cnblogs.com/jicheng/p/5946460.html

http://www.cnblogs.com/kissdodog/archive/2012/12/14/2818827.html

http://blog.csdn.net/canglingyue/article/details/52386196

web本地存儲事件監聽

當程式修改localStorage與sessionStorage時將觸發全局事件。

當setItem(),removeItem()或者clear() 方法被調用，並且數據真的發生了改變時，就會觸發storage事件,如果需要進行監聽數據處理，通過以下方法:
window.addEventListener(event,handleEvent, capture)
event:設置成storage
handleEvent:事件處理函數
capture:事件處理順序，一般設置成false,表示採用冒泡方式處理

handleEvent處理事件的函數會接收到一個StorageEvent對象，該對象有以下屬性:
key:被修改的鍵。
oldValue:修改前的值（如果是增加新的鍵值，則該屬性為null）
newValue:修改後的值（如果是刪除鍵值，則該屬性為null）
url/uri:觸發當前存儲事件的頁面的url

註意：storage改變的時候，觸發這個事件會調用所有同域下其他視窗的storage事件，不過它本身觸發storage即當前視窗是不會觸發這個事件的（當然ie這個特例除外，它包含自己本事也會觸發storage事件）

localStorage sessionStorage 和cookie等前端存儲方式總結