目录
1.Cookie
1)cookie的定义和特性
定义:cookie视最早被提出来的本地存储方式,在此前,服务器端是无法判断网络中的两个请求是否是同一用户发起的,为解决这个问题,cookie就出现了。cookie的大小只有4KB,它是一种纯文本文件,每次发起HTTP请求,都会携带cookie。
cookie的特性:
- cookie一旦创建成功,名称就无法修改
- cookie是无法跨域名的,也就是说a域名和b域名下的cookie是无法共享的,这也是由cookie的隐私安全性决定的,这样就能够阻止非法获取其他网站的cookie。
- 每个域名下cookie的数量不能超过20个,每个cookie的大小不能超过4KB
- cookie有安全问题,如果cookie被拦截了,那就可能获得session的所有信息,即使加密也于事无补,不需要知道cookie的意义,只要转发cookie就能达到目的
- cookie在请求一个新的页面的时候都会被发送过去
如果需要域名之间跨域共享cookie,有两种方法:
- 使用Nginx反向代理
- 在一个站点登录之后,往其他网站写cookie。服务端的session存储到一个节点,cookie存储sessionid。
2) cookie的使用场景
- 最常用的使用场景就是cookie和session结合使用,我们将sessionid存储到cookie中,每次发请求都会携带这个sessionid,这样服务端就知道是谁发起的请求,从而响应相应的信息。
- 可以统计页面的点击次数
3)cookie有哪些字段,作用分别是什么
cookie由以下字段组成:
Name
:cookie的名称Value
:cookie的值,对于认证cookie,value值包括web服务器所提供的访问令牌Domain
:可以访问该cookie的域名,cookie机制并未遵循严格的同源策略,允许一个子域可以设置或获取其父域的cookie。当需要实现单点登录方案时,cookie的上述特性非常有用,然而也增加了cookie受到攻击的危险,比如攻击者可以借此发动会话定制攻击。因而,浏览器禁止在Domain属性设置.org,.com等通用顶级域名,以及在国家及地区顶级域名下注册的二级域名,以减小攻击发生的范围。Path
:可以访问此cookie的页面路径。比如domain是abc.com,path是/test,
那么只有/test
路径下的页面才可以读取此cookie。Expires/Max-size
:此cookie的超时时间。若设置其值为一个时间,那么当到达此时间后,此cookie失效。不设置的话默认值是session,意思是cookie会和session一起失效。当浏览器关闭(不是浏览器标签页,而是整个浏览器)后,此cookie无效。Size
:cookie的大小HTTP
: 该字段包含HTTPOnly属性,该属性用来设置cookie能否通过脚本来访问,默认为空,即可以通过脚本访问。
在客户端是不能通过js代码去设置一个httpOnly类型的cookie的,这种类型的cookie只能通过服务端来设置。
该属性用于防治客户端脚本通过document.cookie属性访问cookie,有助于保护cookie不被跨站脚本攻击窃取或篡改。但是HTTPOnly的应用仍然存在局限性,一些浏览器可以阻止客户端脚本对cookie的读操作,但允许写操作;此外大多数浏览器仍允许通过XMLHTTP对象读取HTTP响应中的Set-Cookie头。Secure
:指定是否使用HTTPS安全协议发送Cookie
cookie总结:
服务器端可以通过Set-Cookie端响应头来配置cookie信息。一条cookie信息包括了5个属性,expires
,domain
,path
,secure
,HttpOnly
。其中,expires
制定了cookie失效的时间,domain
是域名,path
是路径,domain和path一起限制了cookie能够被哪些url访问
。secure
规定了cookie只能在确保安全的情况下传输,HttpOnly
规定了这个cookie只能被服务器访问,不能使用js脚本访问。
2.LocalStorage
LocalStorage是HTML5引入的特性,由于有的时候我们存储的信息较大,cookie就不能满足我们的需求,这时候LocalStorage就派上用场了。
1)LocalStorage的优点
- 在大小方面,LocalStorage的大小一般为5MB,可以储存更多的信息
- LocalStorage是持久化存储,并不会随着页面的关闭而消失,除非主动清理,不然会永久存在
- 仅储存在本地,不像Cookie那样每次HTTP请求都会被携带
2)LocalStorage的缺点
- 存在浏览器兼容问题,IE8以下版本的浏览器不支持
- 如果浏览器设置为隐私模式,那我们将无法读取到LocalStorage
- LocalStorage受到同源策略的限制,即端口,协议,主机地有任何一个不同,都不会访问
3)LocalStorage的常有API
//保存数据到localStorage
localStorage.setItem('key','value');
//从localStorage获取 数据
let datea = localStorage.getItem('key');
//从localStorage 删除保存到数据
localStorage.removeItem('key');
//从localStorage删除所有保存到数据
localStorage.clear();
//获取某个索引的Key
localStorage.key(index)
4)LocalStorage的使用场景
- 有些网站有换肤的功能,这时候就可以将换肤的信息存储在本地的LocalStorage中,当需要换肤的时候,直接操作LocalStorage即可
- 在网站中的用户浏览信息也会存储在localStorage中,还有些网站的一些不常变动的个人信息等也可以存储在本地的LocalStorage中
3.SessionStorage
定义:SessionStorage和LocalStorage都是在HTML5才提出来的存储方案,SessionStorage主要用于临时保存同一个窗口(或标签页)的数据,刷新页面时不会删除,关闭窗口或者标签页之后将会删除这些数据。
SessionStorage和LocalStorage对比:
- SessionStorage和LocalStorage都是本地进行数据存储
- SessionStorage也有同源策略的限制,但是SessionStorage有更加严格的限制,SessionStorage只有在同一浏览器的同一个窗口下才能够共享
- SessionStorage和LocalStorage都不能被爬虫爬取
SessionStorage的常用API:
//保存数据到sessionStorage
sessionStorage.setItem('key','value');
//从sessionStorage获取 数据
let datea = sessionStorage.getItem('key');
//从sessionStorage 删除保存到数据
sessionStorage.removeItem('key');
//从sessionStorage删除所有保存到数据
sessionStorage.clear();
//获取某个索引的Key
sessionStorage.key(index)
SessionStorage的使用场景:
由于SessionStorage具有实效性,所以用来存储一些网站的游客登录的信息,还有临时的浏览器记录信息。当关闭网站之后,这些信息也就随之消除了。
4.cookie,localStorage,SessionStorage区别
相同点:都是将数据存储在客户端的方法
。
不同点:
存储数据的大小不同
cookie数据大小不能超过4KB。sessionStorage和localStorage虽然有存储大小的限制,但是比cookie大得多,一般为5MB。有效时间不同
cookie 在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。
sessionStorage 当浏览器窗口关闭后自动删除。
localStorage 如果不主动清除,就永久保留。数据与服务器之间的交互方式不同
cookie的数据会自动的传递到服务器,服务器端也可以写cookie到客户端
sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存
5.IndexDB
IndexDB:是被正式纳入HTML5标准的数据库存储方案,它是NoSQL数据库
,用键值对进行存储
,可以进行快速读取操作,非常适合web场景,同时用JavaScript进行操作会非常方便。
IndexDB具有以下特点:
键值对存储
:IndexedDB内部采用对象仓库(object store)存放数据。所有类型的数据都可以直接存入,包括JavaScript对象。对象仓库中,数据以”键值对“的形式保存,每一个数据记录都有对应的主键,主键是独一无二的,不能有重复,否则会抛出一个错误。异步
: IndexedDB操作时不会锁死浏览器,用户依然可以进行其他操作,这与LocalStorage形成对比,后者的操作是同步的。异步设计是为了防止大量数据的读写,拖慢网页的表现。支持事务
: IndexedDB支持事务(transaction),这意味着一系列操作步骤之中,只要有一步失败,整个事务就都取消,数据库回滚到事务发生之前到状态,不存在只改写一部分数据的情况。同源限制
:IndexedDB受到同源限制,每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库,而不能访问跨域的数据库。储存空间大
:IndexedDB的存储空间比LocalStorage大得多,一般来说不少于250MB,甚至没有上限。支持二进制存储
:IndexedDB不仅可以存储字符串,还可以存储二进制数据(ArrayBuffer对象和Blob对象)。