jd传统 cookie
session
H5 的本地存储: localstorage 和 sessionstorage
cookie:
http 无状态
不持久
前端和后端进行数据交互的时候, 是用 http 请求, 但是 http 是一种无状态的协议, 无状态的意思就是收到一个请求, 返回一个相应, 而不关心请求者的身份. http 也不是一种持久性的链接, 对于请求来说, 记住某用户的身份比较困难.
然后就出现了 cookie, 就是为了在用户端保存用户身份, 浏览器会在操作系统里开辟一个文件, 专门存放 cookie, 这个文件只要不删除就会一直存在着, 而在每次请求后端时, 都会在 http 的头里面带上头信息, 后端就能知道这个是谁发来的, 而 cookie 就是一个字符串, 用分号分割的多个 key-value 字段, 存储在本地的加密文件里, 这个是浏览器可操作的为数不多的文件之一. 但出于安全考虑, 这个一般加密的, 只有浏览器能操作. 如果直接打开这个文件的话就会发现是一堆加密文本.
cookie 还有域名和路径限制, cookie 里面有几个主要字段,
name: cookie 名称
domain: cookie 生效的域名, 有作用域概念, 比如二级域名可以使用一级域名的 cookie, 但是不能操作其他二级域名 cookie
path: cookie 生效的路径
expires: cookie 过期时间, 如果不指定时间,就会在一次会话结束时删除
HttpOnly: 表示这个 cookie 是由服务端设的, 不允许在用户端更改.
cookie 具体用法
查询 cookie
document.cookie
添加 cookie
document.cookie = 'name=Rose' //添加 cookie 的一个键值对
document.cookie = 'name=Rose; domain=xx.com; path=/xx.html;expires=过期时间'
// 当 domain 和 path 都对应上且时间没过期, 能够添加成功一条 cookie
删除 cookie
把过期时间设置 0 或者以前的日期
session:
服务端保存请求信息的机制
在接到 http 请求以后服务端生成 sessionid 把sessionid放到用户 cookie 里. 当然 sessionid 不一定都是 cookie 实现的, 可以放在请求参数里, 或者在 http 的头里面开辟一个 tooken 字段. 没有设置过期时间的 cookie 只会存在一次会话中, session 就失效了
localstorage:
比如记录用户选中哪个菜单, 或者用户喜欢的样式, 为了前端展示用的, 如果记录在 cookie 上, 那么这些请求都和后端没什么关系, 增大了网络请求的体积
所以 H5 新增了 localstorage, 有域名限制, 不存在作用域概念, 只能在当前域名下使用.
localstorage 被存在一个对象里, 也是一个键值对, 没有过期时间, 以文件形式存储在操作系统上
sessionstorage:
H5 新增
有域名限制
有生命周期
具体用法
查看 localstorage
window.localStorage.getItme('xx');
添加 localstorage
window.localStorage.setItem('name', 'Rosen');
删除
window.localStorage.removeItem('xx')
sessionstorage 和 localstorage 用法一样