本地數據存儲（客戶端存儲）

本地數據存儲（客戶端存儲）

本地存儲數據分爲四種方式：

1.cookie

2.webStorage

3.Flash存儲：藉助Flash播放器

4.IndexedDB

webStorage

提供了經過瀏覽器存儲鍵/值對，以更直觀的方式比使用cookie機制

特色

1.客戶端存儲數據技術，本地存儲

2.每一個存儲源不能大於10MB

3.包括localStorage,sessionStorage

優勢：

1.存儲數據量大

2.不會隨http請求一塊兒發送

缺點：

1.在瀏覽器的隱私模式下不能讀取

2.本質是在讀寫文件，寫入數據量大的話會卡（FF是將localstorage寫入內存中的）

3.不能被爬蟲讀取

侷限性

多數瀏覽器提供了隱身/私密模式，這與本地存儲的使用存在根本矛盾，爲防止用戶禁用本地存儲，在使用本地存儲前應對使用環境進行校驗，檢查本地存儲功能是否可用

localStorage,sessionStorage公有API

setItem

type: Function

target: 設置/修改指定存儲鍵值對

param: {String} [key] (required) 存儲數據別名，用於獲取/清除/修改數據的惟一識別碼

param: {String} [valie] (required) 值

return {Undefined}

getItem

type: Function

target: 獲取指定存儲鍵值對

param: {String} [key] (required) 存儲數據別名，用於獲取/清除/修改數據的惟一識別碼

return {String || Null} 值

removeItem

type: Function

target: 清除指定存儲鍵值對

param: {String} [key] (required) 存儲數據別名，用於獲取/清除/修改數據的惟一識別碼

return {Undefined}

clear

type: Function

param: null

target: 清除全部存儲鍵值對

return {Undefined}

key

type: Function

param: {Number} [index] (required) 存儲數據別名按字母排序後的序列值

return {String || Null} 獲取key

length

type: Attribute

target: 獲取storage存儲數據總數量

return {Number} 存儲數據個數

localStorage,sessionStorage異同點

不一樣瀏覽器沒法共享localStorage或sessionStorage中的信息。相同瀏覽器的不一樣頁面間能夠共享相同的 localStorage（頁面屬於相同域名和端口），可是不一樣頁面或標籤頁間沒法共享sessionStorage的信息。這裏須要注意的是，頁面及標 籤頁僅指頂級窗口，若是一個標籤頁包含多個iframe標籤且他們屬於同源頁面，那麼他們之間是能夠共享sessionStorage的。

cookie

特色

1.生命週期只在設置的cookie過時時間內有效，即便窗口或瀏覽器關閉。

2.存放數據大小爲4K左右且有個數限制（各瀏覽器不一樣），通常不能超過20個。

3.與服務器端通訊：每次都會攜帶在HTTP頭中，若是使用cookie保存過多數據會帶來性能問題。

4.Cookie須要程序員本身封裝，源生的Cookie接口不太友好

優勢：極高的擴展性和可用性

1.經過良好的編程，可控制cookie保存對象的大小。

2.經過加密和安全傳輸技術，減小cookie被破解的可能性。

3.控制cookie的生命週期，使之不會永遠有效。這樣的話偷盜者極可能拿到的就是一個過時的cookie。

缺點

1.cookie的長度和數量的限制。每一個domain最多隻能有20條cookie，每一個cookie長度不能超過4KB。不然會被截掉。

2.安全性問題。若是cookie被人攔截，那我的就能夠獲取到全部session信息。

3.有些狀態不能保存在客戶端。例如，爲了防止重複提交表單，咱們須要在服務端保存一個計數器。若吧計數器保存在客戶端，則起不到什麼做用。