1>Cookie:
1. 概念:
Cookie 由键值对构成是由服务器创建, 然后通过响应发送给客户端. 客户端会保存 Cookie, 并会标注出 Cookie 的来源(哪个服务器的 Cookie). 当客户端向服务器发出请求时会把所有这个服务器 Cookie 包含在请求中发送给服务器, 这样服务器就可以识别客户端了. 在 js 中 cookie 以字符串的形式保存在浏览器中.
2.http 中 cookie
1请求头, 客户端发送给服务器端;
格式: Cookie:a=A;b=B;c=C. 即多个 Cookie 用分号离开;
2响应头, 服务器端发送给客户端
一个 Cookie 对象一个 Set-Cookie:
- Set-Cookie:a=A
- Set-Cookie:b=B
- Set-Cookie:c=C
3Cookie 的覆盖
如果服务器端发送重复的 Cookie 那么会覆盖原有的 Cookie, 例如客户端的第一个请求服务器端发送的 Cookie 是: Set-Cookie:a=A; 第二请求服务器端发送的是: Set-Cookie:a=AA, 那么客户端只留下一个 Cookie, 即: a=AA.
3.js 中 cookie 设置
cookie 的几种常见属性: name(名称),value(值),expires(过期时间),path(路径),domain(域),secure(安全), 其中后四个是可选的.
document.cookie='userName=wangjunjie'.
1, 名和值: 名用来引用 cookie, 值是 cookie 的信息部分, 这两部分是必选的.
设置 cookie 的名值: document.cookie='userName=wangjunjie'.
2, 过期时间: 如果 cookie 不设置 expires, 用户关闭浏览器后 cookie 过期, 下次打开浏览器时该 cookie 不复存在. 过期时间的格式是非常重要的, 对于 IE 浏览器尤为重要, 它应该与 toGMTString()给出的格式相同.
3, 路径: 站点里有两个目录~/A 和~/B,~/B 中设置的 cookie 可以在它的目录及其子目录下访问, 不能在~/A 中访问, 如果想在站点里的任何地方访问~/B 中设置的 cookie, 则需要把 path 设置为'/'.
设置 cookie 的路径: document.cookie='userName=wangjunjie;path=/';
4. 域: 默认情况下 cookie 仅用于设置它的域下面的页面, 假设现在有两个站点 a.blog.com 和 b.blog.com, 在 a.blog.com 下设置的 cookie 不能在 b.blog.com 下访问, 反之也是这样, 如果想在两个站点下都访问这个 cookie 需要该 domain 值.
设置 cookie 的域: document.cookie='userName=wangjunjie;domain=blog.com';
5, 安全: cookie 的最后一部分是一个 Boolen 值, 默认为 false, 总是发送 cookie, 不考虑安全性, 如果设置为 true, 则 cookie 仅发送给尝试使用安全通道检索它的 web 服务器.
4.cookie 代码
- // 设置 cookie
- function setCookie(name,value,days){
- var d = new Date();
- d.setTime(d.getTime() + (days*24*60*60*1000));
- var expires = 'expires=' +d.toGMTString();
- document.cookie=name+'='+value+';'+expires;
- }
- setCookie('shisha',18,1)
- // 获取 cookie
- function getCookie(cname){
- var name = cname + '=';
- var ca =document.cookie.split(';');
- for(var i = 0;i
- 2>session
1. 概念:
客户端浏览器访问服务器的时候, 服务器把客户端信息以某种形式记录在服务器上. 这就是 Session. 客户端浏览器再次访问时只需要从该 Session 中查找该客户的状态就可以了. 如果说 Cookie 机制是通过检查客户身上的 "通行证" 来确定客户身份的话, 那么 Session 机制就是通过检查服务器上的 "客户明细表" 来确认客户身份. Session 相当于程序在服务器上建立的一份客户档案, 客户来访的时候只需要查询客户档案表就可以了. 比如张三和李四分别访问该网站, 在服务端会产生两个 SessionID 来区分该用户, 而在客户端将对应的 SessionID 存放在 Cookie 中, 以便我们再次访问时得到我们所需的资源.
2. 解决的问题:
session 解决的问题和 cookie 一样, 比如: 我在 www.a.com/login.php 里面登陆了, 我在 www.a.com/index.php 也希望是登陆状态, 但是这是 2 个不同的页面, 也就是 2 个不同的 HTTP 请求, 这 2 个 HTTP 请求是无状态的, 也就是无关联的, 所以无法单纯的在 index.php 中读取到它在 login.php 中已经登陆了. 这是候就出现了 cookie,cookie 是把少量的信息存储在用户自己的电脑上, 它在一个域名下是一个全局的, 只要设置它的存储路径在域名 www.a.com 下 , 那么当用户用浏览器访问时, 就可以从这个域名的任意页面读取 cookie 中的信息. 所以就很好的解决了我在 www.a.com/login.php 页面登陆了, 我也可以在 www.a.com/index.php 获取到这个登陆信息了. 同时又不用反复去查询数据库. 但是由于 cookie 是存在用户端, 而且它本身存储的尺寸大小也有限, 最关键是用户可以是可见的, 并可以随意的修改, 很不安全. 这时候 session 就出现了 session 他解决了在一次会话中 2 次 HTTP 的请求的关联, 让它们产生联系, 让 2 两个页面都能读取到找个这个全局的 session 信息. session 信息存在于服务器端, 所以也就很好的解决了安全问题.
3>cookie 和 session 的区别
1,cookie 数据存放在客户的浏览器上, session 数据放在服务器上
2,cookie 不是很安全, 别人可以分析存放在本地的 COOKIE 并进行 COOKIE 欺骗, 考虑到安全应当使用 session
3,session 会在一定时间内保存在服务器上. 当访问增多, 会比较占用你服务器的性能, 考虑到减轻服务器性能方面, 应当使用 COOKIE
4, 单个 cookie 在客户端的限制是 3K, 就是说一个站点在客户端存放的 COOKIE 不能 3K
4>Cookie,SessionStorag,LocalStorage
共同点:
Cookie,SessionStorag,LocalStorage 都是在浏览器端存储的数据, 且为同源的.
区别:
1. 传输:
cookie 数据始终在同源的 http 请求中携带(即使不需要). 而 sessionStorage 和 localStorage 不会自动把数据发给服务器, 仅在本地保存.
2. 存储大小:
cookie 数据不能超过 4k, 同时因为每次 http 请求都会携带 cookie, 所以 cookie 只适合保存很小的数据, 如会话标识. sessionStorage 和 localStorage 虽然也有存储大小的限制, 但比 cookie 大得多, 可以达到 5M 或更大.
3. 保存时间:
数据有效期不同, sessionStorage: 仅在当前浏览器窗口关闭前有效; localStorage: 始终有效, 窗口或浏览器关闭也一直保存, 除非主动删除数据, 否则数据是永远不会过期的. 因此用作持久数据; cookie 只在设置的 cookie 过期时间之前一直有效, 即使窗口或浏览器关闭. 如果不设置默认浏览器关闭失效.
4. 作用域不同:
不同页面或标签页间无法共享 sessionStorage 的信息, sessionStorage 为每一个给定的源 (given origin) 维持一个独立的存储区域, 该存储区域在页面会话期间可用(即只要浏览器处于打开状态, 包括页面重新加载和恢复).localStorage 在所有同源窗口中都是共享的; cookie 也是在所有同源窗口中都是共享的.
5>localStorage 和 sessionStorage 使用时使用相同的 API
通过 getItem 或直接使用 localStorage["key"]获取到的信息均为实际存储的副本
- localStorage.setItem("name","value");// 以 "name" 为名称存储一个值 "value"
- localStorage.getItem("name");// 获取名称为 "name" 的值
- localStorage.removeItem("name");// 删除名称为 "name" 的信息.
- localStorage.clear();// 清空 localStorage 中所有信息
枚举 localStorage 的方法:
for(var i=0;i
来源: https://www.2cto.com/kf/201807/761946.html