一、基本語法
在客戶端存儲數(shù)據(jù) HTML5 提供了兩種在客戶端存儲數(shù)據(jù)的新機制：
- localStorage - 沒有時間限制的數(shù)據(jù)存儲
- sessionStorage - 針對一個 session 的數(shù)據(jù)存儲
而在之前哮幢，這些都是由 cookie 完成的。但是 cookie 不適合大量數(shù)據(jù)的存儲撩银，因為它們由每個對服務(wù)器的請求來傳遞，這使得 cookie 速度很慢而且效率也不高豺憔。
在 HTML5 中额获，數(shù)據(jù)不是由每個服務(wù)器請求傳遞的够庙，而是只有在請求時使用數(shù)據(jù)。它使在不影響網(wǎng)站性能的情況下存儲大量數(shù)據(jù)成為可能抄邀。
HTML5 使用 JavaScript 來存儲和訪問數(shù)據(jù)耘眨。可以通過調(diào)用Window.sessionStorage和Window.localStorage屬性創(chuàng)建一個Storage對象的實例境肾。
Storage 對象以簡單的鍵值得形式來儲存數(shù)據(jù)剔难，鍵值都是以字符串的形式進行儲存，如果一個值是數(shù)字奥喻，它將被轉(zhuǎn)為字符串偶宫。
Storage 對象也提供了一些數(shù)據(jù)增刪改查提供的方法：
- key();
- getItem();
- setItem();
- removeItem();
- clear();
下面以localStorage為例來操作數(shù)據(jù)
localStorage 的方法
- 新增或者修改數(shù)據(jù)：
localStorage.colorSetting = '#a4509b';
localStorage['colorSetting'] = '#a4509b';
localStorage.setItem('colorSetting', '#a4509b');
- 獲取數(shù)據(jù)：
localStorage.colorSetting;
localStorage['colorSetting'];
localStorage.getItem('colorSetting');
- 刪除數(shù)據(jù)或清空數(shù)據(jù)：
localStorage.removeItem('colorSetting');
// 刪除數(shù)據(jù)數(shù)據(jù)時使用單個參數(shù)；
localStorage..clear();
// 清空數(shù)據(jù)數(shù)據(jù)時不需要參數(shù)环鲤；
localStorage 和 sessionStorage 的區(qū)別
sessionStorage 也具有上面localStorage 使用的一些方法纯趋，但不同的是：
localStorage存儲的數(shù)據(jù)沒有時間限制。只要瀏覽器不清楚數(shù)據(jù)冷离，它儲存的數(shù)據(jù)一直存在吵冒。sessionStorage方法針對一個session進行數(shù)據(jù)存儲。當用戶關(guān)閉瀏覽器窗口后西剥，數(shù)據(jù)會被刪除痹栖。
localStorage 的巧用
對用戶訪問頁面的次數(shù)進行計數(shù)：
<script type="text/javascript">
if (localStorage.pagecount)
{
localStorage.pagecount=Number(localStorage.pagecount) +1;
}
else
{
localStorage.pagecount=1;
}
</script>
用戶每次刷新頁面都會觸發(fā)localStorage，觸發(fā)localStorage后都會給 localStorage.pagecount的值增加增加一瞭空，以此來達到統(tǒng)計訪問量的目的揪阿。
用戶在當前 session 中訪問頁面的次數(shù)進行計數(shù)時，將上面代碼中的localStorage換成sessionStorage即可匙铡。
二图甜、第三方插件
對于數(shù)據(jù)多維的儲存碍粥，使用Storage插件會更加方便鳖眼，比較常用有Storage.js、store.js等插件嚼摩。
store.js 插件：
該插件小巧钦讳，簡介，兼容性很強枕面，可實現(xiàn)大多數(shù)日常的應(yīng)用愿卒。
API
// Store current user
store.set('user', { name:'Marcus' })
// Get current user
store.get('user')
// Remove current user
store.remove('user')
// Clear all keys
store.clearAll()
// Loop over all stored values
store.each(function(value, key) {
console.log(key, '==', value)
})
