一边学习前端, 一边通过博客的形式自己总结一些东西, 当然也希望帮助一些和我一样开始学前端的小伙伴.
如果出现错误, 请在评论中指出, 我也好自己纠正自己的错误
author: thomaszhou
cookie 和 session 的区别
cookie 数据存放在客户的浏览器上, session 数据放在服务器上
cookie 不是很安全, 别人可以分析存放在本地的 cookie 并进行 cookie 欺骗, 考虑到安全应当使用 session. 用户验证这种场合一般会用 session
session 保存在服务器, 客户端不知道其中的信息; 反之, cookie 保存在客户端, 服务器能够知道其中的信息
session 会在一定时间内保存在服务器上, 当访问增多, 会比较占用你服务器的性能, 考虑到减轻服务器性能方面, 应当使用 cookie
session 中保存的是对象, cookie 中保存的是字符串
session 不能区分路径, 同一个用户在访问一个网站期间, 所有的 session 在任何一个地方都可以访问到, 而 cookie 中如果设置了路径参数, 那么同一个网站中不同路径下的 cookie 互相是访问不到的
深入理解 session 和 cookie 的关系
Session: 是在服务端保存的一个数据结构, 用来跟踪用户的状态, 这个数据可以保存在集群, 数据库, 文件中;
Cookie: 是客户端保存用户信息的一种机制, 用来记录用户的一些信息, 也是实现 Session 的一种方式.
1, 由于 HTTP 协议是无状态的协议, 所以服务端需要记录用户的状态时, 就需要用某种机制来识具体的用户, 这个机制就是 Session. 典型的场景比如购物车, 当你点击下单按钮时, 由于 HTTP 协议无状态, 所以并不知道是哪个用户操作的, 所以服务端要为特定的用户创建了特定的 Session, 用用于标识这个用户, 并且跟踪用户, 这样才知道购物车里面有几本书. 这个 Session 是保存在服务端的, 有一个唯一标识. 在服务端保存 Session 的方法很多, 内存, 数据库, 文件都有. 集群的时候也要考虑 Session 的转移, 在大型的网站, 一般会有专门的 Session 服务器集群, 用来保存用户会话, 这个时候 Session 信息都是放在内存的, 使用一些缓存服务比如 Memcached 之类的来放 Session.
2, 思考一下服务端如何识别特定的客户?: 这个时候 Cookie 就登场了. 每次 HTTP 请求的时候, 客户端都会发送相应的 Cookie 信息到服务端. 实际上大多数的应用都是用 Cookie 来实现 Session 跟踪的, 第一次创建 Session 的时候, 服务端会在 HTTP 协议中告诉客户端, 需要在 Cookie 里面记录一个 Session ID, 以后每次请求把这个会话 ID 发送到服务器, 我就知道你是谁了.
session 的运行依赖 session id, 而 session id 是存在 cookie 中的
3, 有人问, 如果客户端的浏览器禁用了 Cookie 怎么办? 一般这种情况下, 会使用一种叫做 URL 重写的技术来进行会话跟踪,(在 url 中传递 session_id)即每次 HTTP 交互, URL 后面都会被附加上一个诸如 sid=xxxxx 这样的参数, 服务端据此来识别用户.
4, Cookie 有个很常用的场景就是自动填上用户名和密码
本来 session 是一个抽象概念, 开发者为了实现中断和继续等操作, 将 user agent 和 server 之间一对一的交互, 抽象为 "会话", 进而衍生出 "会话状态", 也就是 session 的概念.
而 cookie 是一个实际存在的东西, http 协议中定义在 header 中的字段. 可以认为是 session 的一种后端无状态实现.
而我们今天常说的 "session", 是为了绕开 cookie 的各种限制, 通常借助 cookie 本身和后端存储实现的, 一种更高级的会话状态实现.
所以 cookie 和 session, 你可以认为是同一层次的概念, 也可以认为是不同层次的概念. 具体到实现, session 因为 session id 的存在, 通常要借助 cookie 实现, 但这并非必要, 只能说是通用性较好的一种实现方案.
localStorage,sessionStorage 和 cookie 的区别
共同点: 都是保存在浏览器端, 且同源的
数据存储方面
cookie 数据始终在同源的 http 请求中携带 (即使不需要), 即 cookie 在浏览器和服务器间来回传递. cookie 数据还有路径(path) 的概念, 可以限制 cookie 只属于某个路径下
sessionStorage 和 localStorage 不会自动把数据发送给服务器, 仅在本地保存.
存储数据大小
存储大小限制也不同, cookie 数据不能超过 4K, 同时因为每次 http 请求都会携带 cookie, 所以 cookie 只适合保存很小的数据, 如会话标识.
sessionStorage 和 localStorage 虽然也有存储大小的限制, 但比 cookie 大得多, 可以达到 5M 或更大
数据存储有效期
sessionStorage: 仅在当前浏览器窗口关闭之前有效;
localStorage: 始终有效, 窗口或浏览器关闭也一直保存, 本地存储, 因此用作持久数据;
cookie: 只在设置的 cookie 过期时间之前有效, 即使窗口关闭或浏览器关闭
作用域不同
sessionStorage 不在不同的浏览器窗口中共享, 即使是同一个页面;
localstorage 在所有同源窗口中都是共享的; 也就是说只要浏览器不关闭, 数据仍然存在
cookie: 也是在所有同源窗口中都是共享的. 也就是说只要浏览器不关闭, 数据仍然存在
web Storage 拥有 setItem,getItem,removeItem,clear 等方法, 不像 cookie 需要自己封装 setCookie,getCookie 等方法
sessionStorage 与页面 js 数据对象的区别
页面中一般的 js 对象的生存期仅在当前页面有效, 因此刷新页面或转到另一页面这样的重新加载页面的情况, 数据就不存在了()
而 sessionStorage 只要同源的同窗口中, 刷新页面或进入同源的不同页面, 数据始终存在, 也就是说只要浏览器不关闭, 数据仍然存在()
cookie 使用方法介绍
cookie 可以写好封装, 也可直接用已经写好的框架这里推荐一个吧'jquery.cookies.2.2.0.min.js'; 注意还有有一个是 cookie.js 的也可以, 个人觉得没有 "jquery.cookies.2.2.0.min.js" 好用.
先说一下, JavaScript 原生的用法.
Cookie 以名 / 值对形式存储 例如 username=John Doe, 这里的数据是 string 类型, 如要是其他格式注意进行格式转换.
JavaScript 可以使用 document.cookie 属性来创建 , 读取, 及删除 cookie.JavaScript 中, 创建 cookie 如下所示:
document.cookie="username=John Doe";
您还可以为 cookie 添加一个过期时间(以 UTC 或 GMT 时间). 默认情况下, cookie 在浏览器关闭时删除:
document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT";
您可以使用 path 参数告诉浏览器 cookie 的路径. 默认情况下, cookie 属于当前页面.
document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";
设置 cookie
- function setCookie(cname,cvalue,exdays)
- {
- var SetTime = new Date(); // 设置过期时间
- SetTime.setTime(SetTime.getTime()+(exdays*24*60*60*1000)); // 设置过期时间
- var expires = "expires="+SetTime.toGMTString(); // 设置过期时间
- document.cookie = cname + "=" + cvalue + ";" + expires; // 创建一个 cookie
- }
读取 cookie
- function getCookie(c_name)
- {
- if (document.cookie.length>0)
- {
- c_start=document.cookie.indexOf(c_name + "=")
- if (c_start!=-1)
- {
- c_start=c_start + c_name.length+1
- c_end=document.cookie.indexOf(";",c_start)
- if (c_end==-1) c_end=document.cookie.length
- return unescape(document.cookie.substring(c_start,c_end))
- }
- }
- return ""
- }
删除 cookie
将 cookie 的有效时间改成昨天.
使用 jquery.cookies.2.2.0.min.js 插件
添加 / 修改 cookie 并设定过期时间:
`$.cookies.set('cookie_id', 'cookie_value', { hoursToLive: 10 });
这里设置的是过期时间是 10 小时, 还可以这样设置过期时间:
- expireDate = new Date();
- expireDate.setTime( expireDate.getTime() + ( 10 * 60 * 60 * 1000 ) );
- $.cookies.set('cookie_id', 'cookie_value', {expiresAt:expireDate});
获取 cookie
$.cookies.get('cookie_id');
删除 cookie
$.cookies.del('cookie_id');
SessionStorage 和 localStorage 用法
H5 对于 web storage 的支持很友好, 使用方法很简单
- setItem()
- sessionStorage.setItem(keyName,value); // 将 value 存储到 key 字段中
- // 或者
- sessionStorage.keyName='value';
- eg:sessionStorage.setItem("name","thomas");
- localStorage.getItem(keyName); // 获取指定 key 的本地存储的值
- // 或者
- var keyName=localStorage.key;
- eg:sessionStorage.getItem("name");
下面我只列举 sessionStorage 方法.
其他的方法基本同上, 只是将前缀 sessionStorage 改成 localStorage 即可
- getItem()
- sessionStorage.getItem(keyName); // 获取指定 key 的本地存储的值
- // 或者
- var keyName=sessionStorage.key;
- eg: sessionStorage.getItem("name");
- removeItem()
- sessionStorage.removeItem(keyName); // 删除指定 ke 的本地存储的值
- eg: sesisonStorage.removeItem("name");
- clear()
sessionStorage.clear() // 清除所有 localStorage 数据
来源: https://juejin.im/post/5ad5b9116fb9a028e014fb19