在客戶端(瀏覽器端)儲存資料有諸多益處，最主要的一點是能快速訪問(網頁)資料。(以往)在客戶端有五種資料儲存方法，而目前就只有四種常用方法了(其中一種被廢棄了)：
- Cookies
- Local Storage
- Session Storage
- IndexedDB
- WebSQL (被廢棄)
Cookies
Cookies 是一種在文件記憶體儲字串資料最典型的方式。一般而言，cookies 會由服務端傳送給客戶端，客戶端儲存下來，然後在隨後讓請求中再發回給服務端。這可以用於諸如管理使用者會話，追蹤使用者資訊等事情。
此外，客戶端也用使用 cookies 儲存資料。因而，cookies 常被用於儲存一些通用的資料，如使用者的首選項設定。
Cookies 的 基本CRUD 操作
通過下面的語法，我們可以建立，讀取，更新和刪除 cookies:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// Create document.cookie = "user_name=Ire Aderinokun"; document.cookie = "user_age=25;max-age=31536000;secure"; // Read (All) console.log( document.cookie ); // Update document.cookie = "user_age=24;max-age=31536000;secure"; // Delete document.cookie = "user_name=Ire Aderinokun;expires=Thu, 01 Jan 1970 00:00:01 GMT"; |
Cookies 的優點
- 能用於和服務端通訊
- 當 cookie 快要自動過期時，我們可以重新設定而不是刪除
Cookies 的缺點
- 增加了文件傳輸的負載
- 只能儲存少量的資料
- 只能儲存字串
- 潛在的 安全問題
- 自從有 Web Storage API (Local and Session Storage)，cookies 就不再被推薦用於儲存資料了
瀏覽器支援
所有主流瀏覽器均支援 Cookies.
Local Storage
Local Storage 是 Web Storage API 的一種型別，能在瀏覽器端儲存鍵值對資料。Local Storage 因提供了更直觀和安全的API來儲存簡單的資料，被視為替代 Cookies 的一種解決方案。
從技術上說，儘管 Local Storage 只能儲存字串，但是它也是可以儲存字串化的JSON資料。這就意味著，Local Storage 能比 Cookies 儲存更復雜的資料。
Local Storage 的 基本CRUD 操作
通過下面的語法，我們可以建立，讀取，更新和刪除 Local Storage:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// Create const user = { name: 'Ire Aderinokun', age: 25 } localStorage.setItem('user', JSON.stringify(user)); // Read (Single) console.log( JSON.parse(localStorage.getItem('user')) ) // Update const updatedUser = { name: 'Ire Aderinokun', age: 24 } localStorage.setItem('user', JSON.stringify(updatedUser)); // Delete localStorage.removeItem('user'); |
Local Storage 的優點
相比於Cookies：
- 其提供了更直觀地介面來儲存資料
- 更安全
- 能儲存更多資料
Local Storage 的缺點
- 只能儲存字串資料(直接儲存複合資料型別如陣列/物件等，都會轉化成字串，會存在存取資料不一致的情況)：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
localStorage.setItem('test',1); console.log(typeof localStorage.getItem('test')) //"string" localStorage.setItem('test2',[1,2,3]); console.log(typeof localStorage.getItem('test2')) //"string" console.log(localStorage.getItem('test2')) //"1,2,3" localStorage.setItem('test3',{a:1,b:2}); console.log(typeof localStorage.getItem('test3')) //"string" console.log(localStorage.getItem('test3')) //"[object object]" //為避免存取資料不一致的情形，儲存複合資料型別時進行序列化，讀取時進行反序列化 localStorage.setItem('test4', JSON.stringify({a:1,b:2})); console.log(typeof localStorage.getItem('test4')) //"string" console.log(JSON.parse(localStorage.getItem('test4'))) //{a:1,b:2} |
瀏覽器支援
IE8+/Edge/Firefox 2+/Chrome/Safari 4+/Opera 11.5+(caniuse)
Session Storage
Session Storage 是 Web Storage API 的另一種型別。和 Local Storage 非常類似，區別是 Session Storage 只儲存當前會話頁(tab頁)的資料，一旦使用者關閉當前頁或者瀏覽器，資料就自動被清除掉了。
Session Storage 的 基本CRUD 操作
通過下面的語法，我們可以建立，讀取，更新和刪除 Session Storage:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// Create const user = { name: 'Ire Aderinokun', age: 25 } sessionStorage.setItem('user', JSON.stringify(user)); // Read (Single) console.log( JSON.parse(sessionStorage.getItem('user')) ) // Update const updatedUser = { name: 'Ire Aderinokun', age: 24 } sessionStorage.setItem('user', JSON.stringify(updatedUser)); // Delete sessionStorage.removeItem('user'); |
優點，缺點和瀏覽器支援
和 Local Storage 一樣
IndexedDB
IndexedDB 是一種更復雜和全面地客戶端資料儲存方案，它是基於 JavaScript、物件導向的和資料庫的，能非常容易地儲存資料和檢索已經建立關鍵字索引的資料。
在構建漸進式Web應用一文中，我已經介紹了怎麼使用 IndexedDB 來建立一個離線優先的應用。
IndexedDB 的基本 CRUD 操作
注：在示例中，我使用了 Jake’s Archibald 的 IndexedDB Promised library, 它提供了 Promise 風格的IndexedDB方法
使用 IndexedDB 在瀏覽器端儲存資料比上述其它方法更復雜。在我們能建立/讀取/更新/刪除任何資料之前，首先需要先開啟資料庫，建立我們需要的stores(類似於在資料庫中建立一個表)。
|
1 2 3 4 5 6 7 |
function OpenIDB() { return idb.open('SampleDB', 1, function(upgradeDb) { const users = upgradeDb.createObjectStore('users', { keyPath: 'name' }); }); } |
建立或者更新store中的資料：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// 1. Open up the database OpenIDB().then((db) => { const dbStore = 'users'; // 2. Open a new read/write transaction with the store within the database const transaction = db.transaction(dbStore, 'readwrite'); const store = transaction.objectStore(dbStore); // 3. Add the data to the store store.put({ name: 'Ire Aderinokun', age: 25 }); // 4. Complete the transaction return transaction.complete; }); |
檢索資料：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// 1. Open up the database OpenIDB().then((db) => { const dbStore = 'users'; // 2. Open a new read-only transaction with the store within the database const transaction = db.transaction(dbStore); const store = transaction.objectStore(dbStore); // 3. Return the data return store.get('Ire Aderinokun'); }).then((item) => { console.log(item); }) |
刪除資料：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// 1. Open up the database OpenIDB().then((db) => { const dbStore = 'users'; // 2. Open a new read/write transaction with the store within the database const transaction = db.transaction(dbStore, 'readwrite'); const store = transaction.objectStore(dbStore); // 3. Delete the data corresponding to the passed key store.delete('Ire Aderinokun'); // 4. Complete the transaction return transaction.complete; }) |
如果你有興趣瞭解更多關於IndexedDB的使用，可以閱讀我的這篇關於怎麼在漸進式Web應用(PWA)使用IndexedD。
IndexedDB 的優點
- 能夠處理更復雜和結構化的資料
- 每個’database’中可以有多個’databases’和’tables’
- 更大的儲存空間
- 對其有更多的互動控制
IndexedDB 的缺點
- 比 Web Storage API 更難於應用
瀏覽器支援
IE10+/Edge12+/Firefox 4+/Chrome 11+/Safari 7.1+/Opera 15+(caniuse)
對比
| Feature | Cookies | Local Storage | Session Storage | IndexedDB |
|---|---|---|---|---|
| Storage Limit | ~4KB | ~5MB | ~5MB | Up to half of hard drive |
| Persistent Data? | Yes | Yes | No | Yes |
| Data Value Type | String | String | String | Any structured data |
| Indexable ? | No | No | No | Yes |