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

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

Cookie

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

頁(yè)面可以訪(fǎng)問(wèn)當(dāng)前頁(yè)的 Cookie 也可以訪(fǎng)問(wèn)父域的 Cookie。

屬性

作用域

設(shè)置作用域

http://wiki.jikexueyuan.com/project/fend_note/images/C/cookie-domain.jpg" alt="" />

設(shè)置作用路徑

http://wiki.jikexueyuan.com/project/fend_note/images/C/cookie-path.jpg" alt="" />

讀取

下面轉(zhuǎn)換 Cookie 至 JavaScript 對(duì)象的函數(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 缺陷

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

Storage

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

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

http://wiki.jikexueyuan.com/project/fend_note/images/S/storage-scope.png" alt="" />

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

對(duì)象

讀取

localStorage.name

添加或修改

localStorage.name = 'Value';

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

刪除

delete localStorage.name

API

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

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