cookie与storage

HTTP Cookie 介绍

• 通常叫做cookie，用于客户端的数据储存（浏览器），通常用于储存用登录信息，偏好设置等。它可以用来告诉服务器请求是否来自同一个浏览器。

主要使用的地方

• 会话状态管理（记录登录信息，登录状态，购物车等）
• 个性化设置，（主题等）
• 浏览器行为跟踪（偏好设置等）

缺点

• 每次请求都会附带cookie信息，带来额外的性能负担。
• cookie只能储存4k左右的数据，不适合储存复杂的需求。
• http情况下为明文传递，可能造成安全问题。
• 在web应用中，cookie通常被用于授权行为，如果窃取了用户cookie，可能导致授权用户的会话受到攻击

使用cookie

• 服务器端一般在响应头部中加入对cookie的设置
  例如: Set-Cookie: <cookie名称>=<cookie值>

• 浏览器端可以用js控制cookie
  详细使用文档

  读取cookie：

  function getCookie (name) {
    var cookieName = encodeURIComponent(name) + "=",
        cookieStart = document.cookie.indexOf(cookieName),
        cookieValue = null;
    if (cookieStart > -1) {
      var cookieEnd = document.cookie.indexOf(";", cookieStart);
      if (cookieEnd == -1) {
        cookieEnd = document.cookie.length;
      }
      cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
    }
  
    return cookieValue;
  }
  

  设置cookie

  function setCookie (name, value, expires, path, secure, httpOnly) {
    var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value);
  
    if (expires instanceof Date) {
      // 判断是否是Date的实例
      cookieText += "; expires=" + expires.toGTSTring();
    }
  
    if (path) {
      cookieText += "; path=" + path;
    }
  
    if (httpOnly) {
      cookieText += "; HttpOnly";
    }
  
    if (secure) {
      cookieText += "; secure";
    }
    document.cookie = cookieText;
    return true;
  }
  

storage介绍

• 提供了浏览器本地储存和会话储存，可以添加删除修改数据项
• HTML5规定的一部分，用来解决cookie带来的一部分限制，当数据被储存到客户端上时，无需持续的将数据发回本地服务器。
• 和cookie一样，只能储存字符串类型数据。
• WebStorage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。(注意在当前网页下改变数据不会在当前网页上触发事件此事件）

会话储存Window.sessionStorage (浏览器关闭就会清除)

设置

 sessionStorage.setItem('name', 'value')

读取

sessionStorage.getItem('name')

删除

sessionStorage.removeItem('name')
sessionStorage.clear('name') // 清除所有

本地储存Window.localStorage (储存在本地，需要手动清除)

设置

 localStorage.setItem('name', 'value')

读取

localStorage.getItem('name')

删除

localStorage.removeItem('name')
localStorage.clear('name') // 清除所有