浏览器存储介绍(cookie & session & local
2018-05-15 本文已影响0人
凛冬已至_123
cookie & session &localStorage 分别是什么?
- cookie
- cookie是存储在浏览器上的一小段数据,用来记录某些当页面关闭或者刷新后仍需记录的信息。在控制台用document.cookie]查看你当前正在浏览的网站的cookie.
- cookie可以使用js在浏览器直接设置(用于记录不敏感信息,如用户名),也可以在服务端通过使用HTTP协议规定的set-cookie来让浏览器种下cookie,这是最常见的做法。
- 每次网络请求Request headers 中都会带上cookie。所以如果cookie太多太大对传输效率会有影响
- 一般浏览器最大存储cookie量为4k,所以大量数据不要存到cookie
- 设置coolie时的参数:
- path :表示cookie影响到的路径,匹配该路径才发这个cookie。expires 和maxAge:告诉浏览器什么时候cookie过期,maxAge 是cookie多久后过期的相对时间。不设置这两个选项时会产生session cookie ,session cookie 是transient的,用户关闭浏览器时会被清除。一般用来保存session的session_id
- secure: 当secure值为true时,cookie在HTTP中无效,在HTTPS中有效
- HTTPOnly: 浏览器不允许脚本操作document.cookie去更改cookie。一般情况下都设置为true,这样可以避免被xss攻击拿到cookie
- session
当一个用户打开淘宝登录后,刷新浏览器仍然显示登录状态。服务器如何分辨这次发起请求的用户是刚才登陆过的用户呢?这就使用了session保存状态。用户在输入用户名密码交给服务端,服务端验证通过后会创建一个session用于记录用户的相关信息,这个session可保存在服务器内存中,也可以保存在数据库中 - 创建session后,会把关联的session_id通过setCookie添加到http响应头中
- 浏览器在加载页面时发现响应头部有set-cookie字段,就把这个cookie种到浏览器指定域名下
- 当下次刷新页面时,发送的请求会带上这条cookie,服务端在接收到后根据这个session_id来识别用户
- cookie是存储在浏览器里的一小段数据,而session是一种让服务器能识别某个用户的机制,session在实现过程中需要用到cookie。二者不同
- localStorage
- localStorage HTML5本地存储web storage特性的API之一,用于将大量数据(最大5M)保存在浏览器中,保存后数据永远不会失效过期,除非用js 手动删除
- 不参与网络传输。
- 一般用于性能优化,可以保存图片、js 、css、HTML模板、大量数据
使用 localStorage封装一个 Storage 对象,达到如下效果:
Storage.set('name', '饥人谷')
Storage.set('age', 2, 30) ; //设置 name 字段存储的值为'饥人谷'
Storage.set('teachers', ['ruoyu', 'fangfang', 'tom'], 60)
Storage.get('name') // ‘饥人谷’
Storage.get('age') // 如果不超过30秒,返回数字类型的2;如果超过30秒,返回 undefined,并且 localStorage 里清除 age 字段
Storage.get('teachers') //如果不超过60秒,返回数组; 如果超过60秒,返回undefined
封装后:
var Storage = (function(){
return {
set: function(key, value, expireSeconds){
localStorage[key] = JSON.stringify({
value: value,
expired: expireSeconds===undifind? undefined:Data.now() + 1000*expireSeconds
}
)
},
get: function(key){
if(localDtorage[key]===undefined){
return
}
var o = JSON.parse(localStorage[key])
if(o.expired === undefined || Data.now() < o.expired){
return o.value
}else{
delete localStorage[key]
}
}
}
})