cookie

  • cookie 是一个请求首部，其中含有先前由服务器通过 Set-Cookie 首部投放并存储到客户端的 HTTP cookies
  • cookie 是服务器在本地机器上存储的小段文本，并随每一个请求发送至统一服务器。
  • cookie 保存在客户端，主要内容包括：键、值、过期时间、路径等

分为会话 cookie 和持久 cookie

  • 会话 cookie 不设置过期时间，浏览器窗口关闭时就消失了。但是，有的浏览器提供了会话恢复功能，这种情况下即使关闭了浏览器，会话 cookie 也会被保留下来，就好像浏览器从来没有关闭一样
  • 持久 cookie 指定一个特定的过期时间（Expires）或有效期（Max-Age），当 cookie 的过期时间被设定时，设定的日期和时间只与客户端相关，而不是服务端

特点

  • 可以实现跨页面全局变量
  • 可以跨越同域名下的多个网页，但不能跨越多个域名使用
  • 同一个网站中所有页面共享一套 cookie
  • 可以设置有效期

缺点

  • 每个特定域名下的 cookie 数量有限：
    • IE6 或 IE6-(IE6 以下版本)：最多 20 个 cookie
    • IE7 或 IE7+(IE7 以上版本)：最多 50 个 cookie
    • FF:最多 50 个 cookie
    • Opera:最多 30 个 cookie
    • Chrome 和 safari 没有硬性限制
    • 当超过单个域名限制之后，再设置 cookie，浏览器就会清除以前设置的 cookie。IE 和 Opera 会清理近期最少使用的 cookie，FF 会随机清理 cookie；
  • 存储量太小，只有 4KB；
  • 每次 HTTP 请求都会发送到服务端，影响获取资源的效率；
  • 需要自己封装获取、设置、删除 cookie 的方法；
  • 标记为 Secure 的 cookie 只应通过被 https 协议加密过的请求发送给客户端，但是即使设置了该标记，敏感信息也不应该通过 cookie 传输，因为 cookie 有其固有的不安全性
  • 带有 HttpOnly 标记的 cookie，无法通过 document.cookie 访问，它们只应该发送给客户端
  • Domain 标识指定了哪些主机可以接受 cookie，默认当前文档的主机，不包含子域名
  • Path 标识指定了主机下的哪些路径可以接受 cookie，该路径必须存在于请求 url 中，子路径也会被匹配
  • SameSite Cookie 允许服务器要求某个 cookie 在跨站请求时不会被发送，从而可以阻止跨站请求伪造攻击（CSRF）
  • SameSite 有三种值：None、Strict、Lax（新版本浏览器默认值）

设置

function setCookie(key, value, t) {
    var oDate = new Date(); // 创建日期对象
    oDate.setDate(oDate.getDate() + t); // 设置过期时间(天)
    // 这样设置的 cookie 不会替换原有的，而是会将新增的值添加到前面
    document.cookie = key + '=' + value + ';expires=' + oDate.toGMTString(); // 设置 cookie 的名称，数值，过期时间
}
// 调用
setCookie('sex', '男', 10);

function getCookie(key) {
    var arr1 = document.cookie.split('; '); // 将 cookie 按“; ”分割（注意分号后面有空格），数组元素为：cookie 名=cookie 值
    // 分割数组里的每个元素
    for (var i = 0; i < arr1.length; i++) {
        var arr2 = arr1[i].split('='); // 按照“=”分割
        // 如果数组的第一个元素等于给定的 cookie 名称
        if (arr2[0] == key) {
            return decodeURI(arr2[1]); // 返回反编译后的 cookie 值
        }
    }
    return '';
}
// 调用
getCookie('username');

function removeCookie(key) {
    setCookie(key, '', -1); // cookie 的过期时间设为昨天
}
// 调用
removeCookie('age');

session

session 是服务器端保存用户数据。

浏览器第一次发送请求时，服务器自动生成了 session id 来唯一标识，并将其通过响应发送到浏览器。浏览器第二次请求时，会将前一次服务器响应中的 session id 放在请求中一并发送到服务器上，服务器从请求中提取出 session id，并和保存的所有 session id 进行对比，找到这个用户信息。一般默认 30 分钟后毁掉这个 session id

session id 是存放在 cookie 中的，每次访问将该 session id 发送到服务器进行对比，若该 id 已过期，则要求用户登录，若未过期，则自动登录

  • Cookie 在客户端（浏览器、易伪造、不安全），Session 在服务器端（会消耗服务器资源）。
  • Cookie 只能保存 ASCII 字符串，如果是 Unicode 字符或者二进制数据需要先进行编码。Cookie 中也不能直接存取 Java 对象。
  • Session 能够存取很多类型的数据，包括 String、Integer、List、Map 等，Session 中也可以保存 Java 对象。

location storage 与 session storage

两者相同，除了生存周期不同之外，location storage 可永久存在，除非被清除，session storage 仅在当前标签页中存在

Last Updated:
Contributors: zhangfei