1. 程式人生 > >本地資料儲存(客戶端儲存)

本地資料儲存(客戶端儲存)

本地資料儲存(客戶端儲存)

本地儲存資料分為四種方式:

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.有些狀態不能儲存在客戶端。例如,為了防止重複提交表單,我們需要在服務端儲存一個計數器。若吧計數器儲存在客戶端,則起不到什麼作用。