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

localStorage sessionStorage 和cookie

localStorage

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

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

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

1. 設置localStorage鍵值對

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

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

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

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

   localStorage.setItem('email','chentging@aliyun.com');//使用setItem函數建立一個鍵值對

2. 根據localStorge鍵取用值

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

3. 清除localStorage

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

sessionStorage

sessionStorage只伴隨着session，窗口一旦關閉就沒了
sessionStorage不會自動把數據發給服務器，僅在本地保存。
sessionStorage不在不一樣的瀏覽器窗口中共享，即便是同一個頁面

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

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

設置,取值,清除都和localStorage徹底同樣

Web SQL Database

1. 簡介

   Web SQL DatabaseAPI實際上未包含在HTML 5規範之中，它是一個獨立的規範，它引入了一套使用SQL操做客戶端數據庫的API，這些API有同步的，也有異步的，同步版本的API只在工做線程（Worker Threads）上有用，因爲並非全部的瀏覽器都支持工做線程，通常狀況下，都會使用異步API。它的核心方法有三個：openDatabase，transaction和executeSql。這些API已經被普遍的實如今了不一樣的瀏覽器裏，尤爲是手機端瀏覽器。雖然W3C官方在2011年11月聲明已經再也不維護Web SQL Database規範，但因爲其普遍的實現程度，瞭解這些API對 Web開發仍是很是有必要的

2. 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,'chentging@aliyun.com']);
             //查詢數據
             tx.executeSql('select * from accountTab',[],function(tt,rs) {
                 //循環結果集
                 for(var i = 0; i < rs.rows.length;i++) {
                     console.log(rs.rows);//輸出結果集
                 }
             });
        
         });

cookie

• cookie數據始終在同源的http請求中攜帶（即便不須要）,即cookie在瀏覽器和服務器間來回傳遞
• cookie數據還要路徑(path)的概念,能夠限制cookie只屬於某個路徑下
• 存儲大小有限制,cookie數據不能超過4K,由於每次http請求都會攜帶cookie,因此cookie適合保存很小的數據
• sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大

• cookie只在設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉

  cookie的應用

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

cookie localStorage sessionStorage比較

1. 傳遞方式

   • cookie數據始終在同源的http請求中攜帶（即便不須要），即cookie在瀏覽器和服務器間來回傳遞

   • sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存
2. 數據大小

   • cookie數據還有路徑（path）的概念，能夠限制cookie只屬於某個路徑下

   • 存儲大小限制也不一樣，cookie數據不能超過4k，同時由於每次http請求都會攜帶cookie，因此cookie只適合保存很小的數據

   • sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大
3. 數據有效期
   • sessionStorage：僅在瀏覽器窗口(或者標籤頁)關閉前有效(即:窗口關閉以前知足同源策略下都有效果)
     • 因此你刷新這個頁面前進後退(前進後退得保證同源策略)

   • localStorage：始終有效，窗口或標籤頁關閉也一直保存(除非主動刪除數據)，所以用做持久數據

   • cookie只在設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉
4. 做用域不一樣

   • sessionStorage每一個窗口的值都是獨立的（每一個窗口都有本身的數據），它的數據會隨着窗口的關閉而消失，窗口間的sessionStorage也是不能夠共享的(就是,你再打開一個標籤頁,一樣的地址,也不會共享)

   • localStorage 在全部同源頁面中都是共享的(前提是相同瀏覽器,別一個是谷歌瀏覽器,一個火狐瀏覽器,而後打開同一個頁面說不是共享的哈哈)也就是能跨頁不能跨域

   • cookie也是在全部同源窗口中都是共享的

5. 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事件）