cookie、localStorage、sessionStorage三者区别以及使用方式

cookie用来保存客户浏览器请求服务器页面的请求信息

HTML5的WebStorage提供了两种API：localStorage（本地存储）和sessionStorage（会话存储）

WebStorage的目的是克服由cookie所带来的一些限制，当数据需要被严格控制在客户端时，不需要持续的将数据发回服务器

三者的共同点都是保存在浏览器端，且同源，下面是他们之间的区别：

生命周期

cookie：可以通过expires设置失效时间，不设置默认关闭浏览器即失效

localStorage：除非手动清除，否则永久保存

sessionStorage：仅在当前会话时候生效，关闭页面即失效

存储大小

cookie:4KB左右

localStorage、sessionStorage:可以保存5M的信息

HTTP请求

cookie:每次都会携带在http头中，过多使用cookie会带来性能问题

localStorage、sessionStorage:仅在客户端（即浏览器）中保存，不参与和服务器的通信

易用性

cookie:需要程序员自己封装，源生的Cookie接口不友好

localStorage、sessionStorage：源生接口可以接受，亦可再次封装来对Object和Array有更好的支持

应用场景

cookie：适合识别用户登录

localStorage和sessionStorage唯一的差别一个是永久保存在浏览器里面，一个是关闭网页就清除了信息

localStorage：可以用来跨页面传递参数

sessionStorage：用来保存临时数据，防止用户刷新页面之后丢失参数

操作 cookie

1、设置 cookie

export const setCookie = (key, value, expire) => {
  const d = new Date();
  d.setDate(d.getDate() + expire);
  document.cookie = `${key}=${value};expires=${d.toUTCString()}`;
};
           

2、读取 cookie

export const getCookie = (key) => {
  const cookieStr = unescape(document.cookie);
  const arr = cookieStr.split("; ");
  let cookieValue = "";
  for (let i = 0; i < arr.length; i++) {
    const temp = arr[i].split("=");
    if (temp[0] === key) {
      cookieValue = temp[1];
      break;
    }
  }
  return cookieValue;
};
           

3、删除 cookie

export const delCookie = (key) => {
  document.cookie = `${encodeURIComponent(key)}=;expires=${new Date()}`;
};
           

操作 localStorage

1、存储 localStorage

export const loalStorageSet = (key, value) => {
  if (!key) return;
  if (typeof value !== "string") {
    value = JSON.stringify(value);
  }
  window.localStorage.setItem(key, value);
};
           

2、获取 localStorage

export const loalStorageGet = (key) => {
  if (!key) return;
  return window.localStorage.getItem(key);
};
           

3、删除 localStorage

export const loalStorageRemove = (key) => {
  if (!key) return;
  window.localStorage.removeItem(key);
};
           

操作 sessionStorage

1、存储 sessionStorage

export const sessionStorageSet = (key, value) => {
  if (!key) return;
  if (typeof value !== "string") {
    value = JSON.stringify(value);
  }
  window.sessionStorage.setItem(key, value);
};
           

2、获取 sessionStorage

export const sessionStorageGet = (key) => {
  if (!key) return;
  return window.sessionStorage.getItem(key);
};
           

3、删除 sessionStorage

export const sessionStorageRemove = (key) => {
  if (!key) return;
  window.sessionStorage.removeItem(key);
};