使用 Cookie 實現 Client 端數據存儲 – 前端工程師必學的 Web Storage 技術（第一篇）

本篇要解決的問題

• Cookie
• Session Storage、Local Storage
• IndexedDB

Cookie

• 限制數量：180 個（Chrome）
• 限制大小：4KB
• 限制期限：可設定，未設定則頁籤關閉就會被刪除

// 存 Cookie
Cookies.set('foo', 'bar');
// 存 Cookie + 設定期限
Cookies.set('foo', 'bar', { expires: 7 });
// 存 Cookie + 設期限 + 限網域
Cookies.set('foo', 'bar',
    { expires: 7, domain: '.example.com', path: '/' }
);
// 抓 Cookie 的值
Cookies.get('foo'); // => 'bar'
// 刪 Cookie
Cookies.remove('foo');
// 刪 Cookie，如果存的時候有指定網域時
Cookies.remove('foo',
    { domain: '.example.com', path: '/' }
);

Demo 及原始碼

瀏覽器上的儲存空間系列

• Cookies
• sessionStorage、localStorage
• IndexedDB