cookie与web Storage都是客户端(浏览器)中存储数据的方式。客户端存储用户信息的需求十分普遍,例如:用户无需重复登录某网站,同时网站也能“记住”用户的一些偏好。
cookie
由于HTTP是无状态协议,通过协议来保存用户信息的想法是无法实现的。所以,人们在客户端/服务端通信报文中加了一个“小尾巴”。客户端第一次发送请求,服务端报以响应并加了一个cookie;客户端第二次请求时就会附带这一个cookie,服务端便“认识”了这个请求是上个客户端发的,从而简化了一些需要向客户端确认的事情(登录信息等等)。
cookie的构成:
- 名称:cookie的名字,需要URL编码;
- 值:存储在cookie中的值,需要URL编码;
- 域:确定cookie所适用的域名,客户端所有向该域发送的请求中都会包含这条cookie。
- 路径:指定域中的某一路径才会发送cookie。指定路径后,同域不同路径将不会发送cookie。
- 失效时间:即字面意思。设置的时间格式为GMT(Wdy,DD-Mon-YY HH:MM:SS GMT)。不进行设置,则失效时间为关闭浏览器后。
- 安全标志:指定后,cookie只有使用了 SSL连接时才会发送到服务器。此时,使用https能够发送cookie,而http就不能发送了。
所以,cookie在HTTP请求中的构成如下:
HTTP/1.1 200 OK
Content-type:text/html
Set-cookie:name1=value1[; expries = GMT][; domain=" "][; path=" "][; secure]
Set-cookie:name2=value2[; expries = GMT][; domain=" "][; path=" "][; secure]
--------------------其它报文----------------------
cookie的限制:
- 同源:请求只有发送至指定域名时才会携带cookie,当然有一些hack方法是能够跨域的;
-
数量限制:同域名下cookie的数量是有限制的,每个浏览器的上限不太一样,一般在20~50个左右。有一个方式可以绕过这种限制:
name=name1=value1&name2=value2&name3=value3
,用这种方法可以骗过浏览器,但是不要过长。 - 尺寸限制:大多数浏览器将cookie限制在4096B,所以不要设置过长的cookie。
JavaScript中的cookie API:
JS是通过BOM的document.cookie
来对cookie进行操作的。
-
查找:
doucument.cookie
可以直接获取网页中已经存在的cookie字符串,其格式为:"name1=value1;name2=value2;name3=value3"
-
添加:通过
document.cookie = "name=value[; expries = GMT][; domain=" "][; path=" "][; secure]"
能够为该页面添加cookie。若name
不同则添加一个新的name
作为新的cookie,若name相同则覆盖原来的cookie。
BUT!cookie的name
和value
需要通过URL编码,所以使用encodeURIcomponent()
来进行编码,所以正确的形式应该是:
document.cookie = encodeURIcomponent(name) + "=" + encodeURIcomponent(value) + "; domain=abc.com ;path=/ ; secure"
-
删除:没有直接删除cookie的方法,所以一般用覆盖或是设置失效时间的方式来删除不再需要的cookie。
总的来说,需要围绕document.cookie
再次封装才能更好的使用cookie。但是把cookie暴露在公共环境中是很容易被XSS注入后获取的,可以设置cookie为HTTPOnly
来避免被document.cookie
直接获取。
Web存储
Web存储是HTML5规范中的新功能,其目的是为了提供一种区别于cookie能够存储大量数据的机制。
所有的Web存储是围绕着Storage这个构造函数来操作的:
Storage函数为页面创建了两个对象实例:sessionStorage/localStorage
,将数据存储于实例中保存至浏览器本地,区别于cookie,它不需要在客户端与服务端之间来回通信,同时它将数据规模最大拓展至5MB(根据不同浏览器,略有不同)。Storage函数的方法如下:
-
clear()
:删除所有值; -
getItem(name)
:根据指定的名字获取值; -
key(index)
:获取index所在的name; -
removeItem(name)
:删除该name的信息; -
setItem(name,value)
:为指定的name设置一个值。
当然,也可以用对象/属性的方法来增删改查;
sessionStorage与localStorage这两个实例对象的差异在于:
- sessionStorage的失效时间为浏览器关闭后,而localStorage是永久保存;
- 两者虽然都是同源(不同于cookie,子域都不能跨越),sessionStorage更为严格,即使为相同域名,在相同浏览器中打开新页面的方式也不能让sessionStorage的数据传递。
此外,Storage提供事件监听,这个事件的event事件拥有四个属性:
-
domain
:操作的域名; -
key
:操作的name; -
newValue
:如果是设置值,则为新值;若是删除,则为null; -
oldValue
:更改之前的值。
网友评论