1、Cookie
1.1、cookie内容
主要包括
-
名字
-
值
-
过期时间
-
路径
-
域
1.2 、cookie特点
- cookie保存在客户端,服务器能够知道其中的信息
- cookie不是很安全,别人可以分析存放在本地的cookie并进行cookie欺骗,考虑安全应当使用session
- cookies由服务端创建,发送给浏览器端,当用户发出请求后,带上cookie发送给服务端做验证
- 来回传递过程中,占用带宽,消耗网络资源,并且容易被中间人获取或浏览器端用户篡改十分不安全
- cookie中如果设置了路径参数,那么同一个网站中不同路径下的cookie互相是无法访问(同源)
- cookies大小只有4k,cookie只能保存字符串类型,以文本的方式;很多浏览器都限制一个站点最多保存20个cookie
- 针对cookie所存在的攻击:Cookie欺骗,Cookie截获
1.3、cookie机制
- 若不设置时间,则表示这个cookie的生命期为浏览器会话期间,关闭浏览器窗口,cookie就会消失。这种cookie被称为会话cookie。 会话cookie一般不存储在硬盘而是保存在内存里,当然这个行为并不是规范规定的。
- 若设置过期时间,浏览器就会把cookie保存到硬盘上,关闭后再打开浏览器这些cookie仍然有效直到超过设定的过期时间。对于保存在内存里的cookie,不同的浏览器有不同的处理方式session机制。
1.4、应用场景
- 判断用户是否登陆过网站,以便下次登录时能够实现自动登录(记住密码)。删除cookie,每次登录重新填写登录的信息
- 保存上次登录的时间等信息。
- 保存上次查看的页面
- 浏览计数
1.5、cookie常用方法
- 设置cookie
/**
* [setJSCookie 页面上设置一个cookie]
* @param {[type]} name [cookie name]
* @param {[type]} value [cookie value]
* @param {[type]} expires [cookie 有效期限 Date]
* @param {[type]} path [可选URL]
* @param {[type]} domain [可选域]
* @param {[type]} secure [可选安全标志secure布尔值]
*/
var setJSCookie = function(name, value, expires, path, domain, secure) {
//对cookie name和cookie value进行URL编码
var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value);
if (expires instanceof Date) {
//expires参数格式化Date对象
cookieText += ": expires=" + expires.toGMTString();
}
if (path) {
cookieText += ";path=" + path;
}
if (domain) {
cookieText += ";domain=" + domain;
}
if (secure) {
cookieText += ";secure";
}
document.cookie = cookieText;
}
- 获取cookie
var getJSCookie = function(name) {
var cookieName = encodeURIComponent(name) + "=",
cookieStart = document.cookie.indexOf(cookieName),
cookieValue = null;
//查找cookie名上加等号的位置
if (cookieStart > -1) {
//存在等号,继续查找第一个分号的位置
var cookieEnd = document.cookie.indexOf(";", cookieStart);
//没找到分号,表示该cookie是字符串中最后一个
//余下的字符串都是cookie的值
if (cookieEnd == -1) {
cookieEnd = document.cookie.length;
}
//使用decodeURIComponent()进行解码
cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
}
//返回cookie,不存在则返回null
return cookieValue;
}
- 删除cookie
//通过覆盖的方式完成cookie删除效果
var resetCookie = function(name, path, domain, secure) {
this.set(name, "", new Date(0), path, domain, secure);
}
2、session
2.1、session特点
- session 保存在服务端,不会被发送到浏览器所以很安全,客户端不知道其中的信心;
- session不能区分路径,同一个用户在访问一个网站期间,session存在同一网站不同页面之中
- session主要用于服务端保存请求信息的机制
- session中保存的是 对象,session通过数据结构来保存,能支持任何类型的对象(session中可含有多个对象)
2.2、session机制
当服务器收到某个客户端的请求请求需要创建session对象时,服务器首先检查这个客户端的请求里是否已包含了一个session标识——session id,session id是加密的。
-
如果已包含则说明以前已经为此客户端创建过session,服务器就按照session id把这个session检索出来使用
-
如果客户端请求不包含session id,则为客户端创建一个session并且生成一个与此session相关联的session id
session id的值:不会重复,无规律的字符串,这个session id将被在本次响应中返回给客户端保存。
保存这个session id的方式可以采用cookie,在交互过程中浏览器可以自动的按照规则将sessionid发送给服务器
-
用户禁用cookie,则要使用URL重写,可以通过response.encodeURL(url) 进行实现;API对encodeURL的结束为
-
当浏览器支持Cookie时,url不做任何处理
-
当浏览器不支持Cookie的时候,将会重写URL将SessionID拼接到访问地址后。
2.3 、session 应用场景
Session用于保存每个用户的专用信息,变量的值保存在服务器端,通过SessionID来区分不同的客户。
- 网上商城中的购物车
- 保存用户登录信息
- 将某些数据放入session中,供同一用户的不同页面使用
- 防止用户非法登录
3、sessionStorage
3.1、 sessionStorage 特点
- sessionStorage仅在当前浏览器窗口关闭之前有效
- sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;
- 存放数据大小一般为5M
- 数据不是由每个服务器请求传递的,而是只有在请求时使用数据,不参与和服务器的通信
- 可以用源生接口,也可再次封装来对Object和Array有更好的支持
- 保存在浏览器端
3.2、 sessionStorage 应用场景
- 单页面应用数据修改、状态保存,刷新页面或进入同源的不同页面,数据不重置
3.3、sessionStorage 常用方法
- 检测sessionStorage
window.sessionStorage
- 添加sessionStorage
sessionStorage.setItem("key","123");
//第2个参数做 JSON.stringfy() 处理
- 获取sessionStorage
sessionStorage.getItem("key");
获取后 做 JSON.parse() 处理
- 删除单个sessionStorage
sessionStorage.removeItem("key");
- 清除所有sessionStorage
sessionStorage.clear();
4、localStorage
4.1、 localStorage 特点
- 除非数据被清除,否则一直存在
- 数据不是由每个服务器请求传递的,而是只有在请求时使用数据,不参与和服务器的通信
- 可以用源生接口,也可再次封装来对Object和Array有更好的支持
- 保存在浏览器端
4.2、 localStorage 应用场景
- 单页面应用数据修改、状态保存,路由跳转刷新不同页面,数据不重置
4.3、localStorage 常用方法
- 检测localStorage
window.localStorage
- 添加localStorage
localStorage.setItem("key","123");
//第2个参数做 JSON.stringfy() 处理
- 获取localStorage
localStorage.getItem("key");
//获取后 做 JSON.parse() 处理
- 删除单个localStorage
localStorage.removeItem("key");
- 清除所有localStorage
localStorage.clear();
4.4、storage事件
if(window.addEventListener){
window.addEventListener("storage",handle_storage,false);
}else if(window.attachEvent){
window.attachEvent("onstorage",handle_storage);
}
function handle_storage(e){
if(!e){
e=window.event;
}
}