數(shù)據(jù)存儲

• 數(shù)據(jù)存儲
  • Cookie
    • 屬性
    • 作用域
    • 讀取
    • 設(shè)置與修改
    • Cookie 缺陷
  • Storage
    • 對象
    • API

數(shù)據(jù)存儲

Cookie

瀏覽器中的 Cookie 是指小型文本文件，通常在 4KB 大小左右。（由鍵值對構(gòu)成用 ; 隔開）大部分時候是在服務(wù)器端對 Cookie 進(jìn)行設(shè)置，在頭文件中 Set-Cookie 來對 Cookie 進(jìn)行設(shè)置。

頁面可以訪問當(dāng)前頁的 Cookie 也可以訪問父域的 Cookie。

屬性

作用域

設(shè)置作用域

設(shè)置作用路徑

讀取

下面轉(zhuǎn)換 Cookie 至 JavaScript 對象的函數(shù)。

function getcookie() {
  var cookie = {};
  var all = document.cookie;
  if (all === '') return cookie;
  var list = all.split('; ');
  for (var i = 0, len = list.length; i < len; i++) {
    var item = list[i];
    var p = item.indexOf('=');
    var name = item.substring(0, p);
    name = decodeURIComponent(name);
    var value = item.substring(p + 1);
    value = decodeURIComponent(value);
    cookie[name] = value;
  }
  return cookie;
}

設(shè)置與修改

document.cookie = 'name=value';

下面為設(shè)置 Cookie 值的封裝函數(shù)。

function setCookie(name, value, expires, path, domain, secure) {
  var cookie = encodeURIComponent(name) + '=' + encodeURIComponent(value);
  if (expires)
    cookie += '; expires=' + expires.toGMTString();
  if (path)
    cookie += '; path=' + path;
  if (domain)
    cookie += '; domain=' + domain;
  if (secure)
    cookie += '; secure=' + secure;
  document.cookie = cookie;
}

下面為刪除** Cookie 值的函數(shù)

function removeCookie(name, path, domain) {
  document.cookie = 'name=' + name + '; path=' + path + '; domain=' + domain + '; max-age=0';
}

Cookie 缺陷

• 流量代價
• 安全性（明文傳遞）
• 大小限制

Storage

因?yàn)?Cookie 弊端的存在，所以在 HTML5 中提供了 Storage 的替代方案。

作用域的不同 Storage 分為 Local Storage 和 Session Storage，前者在用戶不清理的情況下默認(rèn)時間為永久，后者默認(rèn)事件則為瀏覽器的會話時間（瀏覽器不同窗口直接不共享 Session Storage）。

不同瀏覽器對其實(shí)現(xiàn)的不同導(dǎo)致支持大小也不太，通常在 5MB 作用。

對象

讀取

localStorage.name

添加或修改

localStorage.name = 'Value';

瀏覽器只支持字符串在 Storage 中的存儲。

刪除

delete localStorage.name

API

使用 API 操作 Storage 可以進(jìn)行向下兼容的功能，在不支持的情況下可以用 Cookie 來代替。

• localStorage.length 獲取鍵值對數(shù)量
• localStorage.getItem('name') 獲取對應(yīng)值
• localStorage.key(i) 對應(yīng)值的索引獲取
• localStorage.setItem('name', 'value') 設(shè)置鍵值對
• localStorage.removeItem('name') 刪除一個值
• localStorage.clear() 刪除所有數(shù)據(jù)