cookie
1.cookie是一段由服务器发送给浏览器,并保存到本地的一段数据(缓存),大小一般为4kb.
2.存储用户的一些信息。浏览器再次访问同一个url时会将这段cookie附加到http的请求中,发送给服务器。所以会增加流量的消耗。
3.浏览器关闭(会话结束)的时候会被删除。通过expire和max-age来设置过期时间
4.浏览器可以通过 document.cookie读写cookie,如果阻止此行为,可以再set-cookie头中,添加httpOnly标记
session
实质是存储在服务器的一小块内存。一般来说是基于cookie实现的。
// 服务端,第一次使用session的时候,服务器要创建一个sessionId,用来做session中存放用户信息的唯一标识
let sesssion = {}
let sessionID = Math.random().toString().slice(2) // eg 123 --- sessionID是随机生成的。
session[sessionID] = 用户信息。 //此时服务器中已存含有用户信息的sessionID对应的内存
服务器通过cookie给用户返回一个sessionID。
response.setHeader(‘Set-Cookie’, sessionID);
//
//客户端发送的请求。 当用户访问同一个url的时候,向服务器发送这个内容为其sessionID的cookie头,
content-Type: text/html
Cookie: 123
//
// 服务端读取cookie中的sessionID。 然后无session中读取对应的内存,最终得到用户信息。
if(request.header.cookie) {
let sessioID = request.header.cookie
let userInfo = session[sessionID]
}
localStorage
window.localStorage是html5新增的一个api。它遵循同源政策。属于本地存储。
1.大小一般为5MB,永久有效。
2.本地的存储和读取,不会被附加到http请求中。
// 保存数据到localStorge
localStorge.setIem('key',‘value’) // { "key": “value”}
// 获取数据
let key = localStorage.getItem('key') // "value"
// 删除保存的数据
localStorage.removeItem(‘key’) // {}
//删除所有保存的数据
localStorage.clear();
sessionStorage
window.sessionStorage也遵循同源政策。 与上面localStorage不同的是,在页面或者浏览器关闭(会话结束)就会被清楚,
保存,获取,删除的api同 localStorage 一直。 setItem, getItem,removeItem, clear
总结:
cookie session
cookie保存在客户端的硬盘里,是浏览器缓存之一。session是保存在服务端的内存里,是一块内存。
cookie每次都随着http请求发送给服务器。 session只需要通过发送保存在cookie头中的sessionID,从服务器中读取对应内存。
cookie以明文的形式存储,内容可以被用户查看或篡改。 session因为只提供一个随机的sessionID,无法被用户直接查看。
cookie localStorage
大小。cookie的大小一般是4KB。 localStorage一般为5MB。
时效。cookie浏览器关闭,会话结束就失效,设置expires,max-age来改变过期时间。 localStorage是永久有效,除非手动清除
cookie会被附加到http请求中。 localStorage不会。
localStorage sessionStorage
时效。 永久有效,除非手动删除。 后者 浏览器关闭(会话清除)就被清空。