😎 Cookie
Cookie是最早被提出来的本地存储⽅式,在此之前,服务端是⽆法判断⽹络中的两个请求是否是同⼀⽤户发起
的,为解决这个问题,Cookie就出现了。Cookie的⼤⼩只有4kb,它是⼀种纯⽂本⽂件,每次发起HTTP请求都会携带Cookie。
Cookie的特性:
- Cookie一旦创建成功,名称就无法修改
- Cookie是无法跨域名的
- 每个域名下Cookie的数量不能超过20个,每个Cookie的大小不能超过4kb
- 有安全问题,如果Cookie被拦截了,那就可获得session的所有信息,即使加密也无事于补,无需知道Cookie的意义,只要转发Cookie就能达到目的
- Cookie在请求一个新的页面的时候都会被发送过去
如果需要域名之间跨域共享Cookie,有两种方法:
- 使用Nginx反向代理
- 在一个站点登陆之后,往其他网站写Cookie。服务端的Session存储到一个节点,Cookie存储sessionId
Cookie使用场景:
- 最常见的场景就是Cookie和session结合使用,我们将sessionId存储到Cookie中,每次发请求都会携带这个sessionId,这样服务端就知道是谁发起的请求,从而响应相应的信息。
- 可以用来统计页面的点击次数
🤓 LocalStorage
LocalStorage是HTML5新引入的特性,由于有的时候我们存储的信息较大,Cookie就不能满足我们的需求,这时候LocalStorage就派上用场了。
LocalStorage的优点:
- 在大小方面,LocalStorage的大小一般为5MB,可以存储更多信息
- LocalStorage是持久储存,并不会随着页面的关闭而消失,除非主动清理,不然会永久存在
- 仅存储在本地,不像Cookie那样每次请求都会被携带
LocalStorage的缺点:
- 存在浏览器兼容问题
- 如果浏览器设置为隐私模式,那么我们将无法读取到LocalStorage
- LocalStorage收到同源策略的限制,即端口、协议、主机地址有任何一个不相同都不会访问
LocalStorage的使用场景:
- 网站一些不常变动的个人信息存储在LocalStorage中
- 在网站中的用户浏览信息也会存储在LocalStorage中
🫣 SessionStorage
SessionStorage和LocalStorage都是在HTML5才提出的存储方案,SessionStorage主要用于临时保存统一窗口(标签页)的数据,刷新页面时不会删除,关闭窗口或标签页之后将会删除这些数据。
SessionStorage的使用场景:
- 由于SessionStorage具有时效性,所以可以用来存储一些网站的游客登陆的信息,还有临时的浏览器记录信息。当关闭网站之后,这些信息也就随之消除了。
SessionStorage和LocalStorage对比
- 两者都在本地进行数据存储
- 两者都有同源策略的限制,而SessionStorage更严格,它只有在同一浏览器的同一窗口下才能共享
- 两者都不能被爬虫爬取
Cookie、LocalStorage、SessionStorage区别
- Cookie:其实最开始是服务器端⽤于记录⽤户状态的⼀种⽅式,由服务器设置,在客户端存储,然后每次发起同源请求时,发送给服务器端。cookie 最多能存储 4 k 数据,它的⽣存时间由 expires属性指定,并且 cookie 只能被同源的⻚⾯访问共享。
- SessionStorage:html5 提供的⼀种浏览器本地存储的⽅法,它借鉴了服务器端 session 的概念,代表的是⼀次会话中所保存的数据。它⼀般能够存储 5M 或者更⼤的数据,它在当前窗⼝关闭后就失效了,并且sessionStorage 只能被同⼀个窗⼝的同源⻚⾯所访问共享。
- LocalStorage:html5 提供的⼀种浏览器本地存储的⽅法,它⼀般也能够存储 5M 或者更⼤的数据。它和 sessionStorage 不同的是,除⾮⼿动删除它,否则它不会失效,并且 localStorage 也只能被同源⻚⾯所访问共享