随着WebApp的出现,产生了在客户端上储存用户信息的要求。下面将介绍常用的3种客户端储存方案,即cookie、localStorage、sessionStorage。通过将部分数据缓存在客户端以减少HTTP请求,可以达到性能优化的效果。
cookie
HTTP cookie,简称cookie,最初用于在客户端储存会话信息。现用于用户识别与状态管理。服务器会将一些数据临时写入客户端计算机内,当用户访问该网站时,可取回cookie
cookie有关的操作写入HTTP请求、响应头内。先是由服务器在响应阶段发送Set-Cookie给客户端。每一个cookie以name为名称,value为值,而客户端保存该cookie。响应头如下
1 | HTTP/1.1 200 OK |
客户端的请求如下
1 | GET /index.html HTTP/1.1 |
首部字段名 | 说明 | 首部字段类型 | 发送者 |
---|---|---|---|
Set-Cookie | 开始状态管理所使用的Cookie信息 | 响应 | 服务器 |
Cookie | 服务器接收到的Cookie信息 | 请求 | 客户端 |
cookie的构成
属性 | 说明 |
---|---|
NAME=VALUE | 赋予Cookie的名称和其值(必需项) |
expires=DATE | Cookie的有效期(若不明确指定则默认为浏览器关闭前为止) |
path=PATH | 将服务器上的文件目录作为Cookie的适用对象(若不指定则默认为文档所在的文件目录) |
domain=域名 | 作为Cookie适用对象的域名(若不指定则默认为创建Cookie)的服务器域名 |
Secure | 仅在HTTPS安全通信时才发送cookie |
HttpOnly | 加以限制,防止cookie被js脚本访问(防止XSS) |
cookie的限制与适用范围
cookie在性质上是绑定在特定的域名下的。当设定了一个cookie后,再给创建它的域名发送请求时,都会包含这个cookie。这个限制确保了储存在cookie中的信息只能让批准的接受者访问,而无法被其他域访问。
由于cookie是存在客户端计算机上的,还加入了一些限制确保cookie不会被恶意使用,同时不会占
据太多磁盘空间。每个域的cookie总数是有限的。
浏览器中对于cookie的尺寸也有限制。大多数浏览器都有大约4096B(加减1)的长度限制。为了
最佳的浏览器兼容性,最好将整个cookie长度限制在4095B(含4095)以内。
由于所有的cookie都会由浏览器作为请求头发送,所以在cookie中存储大量信息会影响到特定域的请求性能。cookie信息越大,完成对服务器请求的时间也就越长。尽管浏览器对cookie进行了大小限制,不过最好还是尽可能在cookie中少存储信息,以避免影响性能。
一定不要在cookie中存储重要和敏感的数据。cookie数据并非存储在一个安全环境中,其中包含的任何数据都可以被他人访问。所以不要在cookie中存储诸如银行卡账号密码或者个人地址之类的数据。
cookie的性质和它的局限使得其并不能作为存储大量信息的理想手段,所以又出现了其他方法。
Web储存机制
在HTML5 规范中引入了sessionStorage与localStorage,旨在解决:
- 提供一种在cookie之外的会话数据解决途径
- 提供一种可大量储存会话的数据机制
Storage类
作为含有通用方法的原型,sessionStorage与localStorage皆继承自Storage类,因此有部分通用API。
Storage类提供最大的储存空间来储存名值对
方法 | 说明 |
---|---|
clear() | 删除所有值 |
getItem(name) | 根据指定键获取相应值 |
key(index) | 获取index处的键 |
removeItem(name) | 删除键为name的名值对 |
setItem(name,value) | 为name设定一个对应的值 |
sessionStorage
sessionStorage对象储存某个特定会话的数据,且该数据保存到浏览器关闭。sessionStorage可以跨页面刷新而存在。由于其继承自Storage类,所以拥有以上表格的方法。
sessionStorage对象主要用于仅针对对话的小段数据的储存。若需要跨越会话储存数据,则需要使用到localStorage对象。
localStorage
若需要在浏览器关闭后依然能够缓存数据在客户端,则需要localStorage对象。要访问同一个localStorage对象,页面必须来自同一个域名、使用同一种协议、在同一个端口上。且像sessionStorage一样,localStorge也继承来自于Storage类的方法。
储存在localStorage中的数据保留到JavaScript删除或是用户清理浏览器缓存。
Web储存的限制
Web储存的限制因浏览器而异。一般来说,对于储存空间大小的限制是以每个来源(域名、协议、端口)为单位的。在使用时应当注意限制。
对于localStorage而言,大多数桌面浏览器会设置每个来源5MB的限制。Chrome和Safari 对每
个来源的限制是2.5MB。而iOS版Safari和Android 版WebKit 的限制也是2.5MB。
对sessionstorage的限制也是因浏览器而异。有的浏览器对sessionStorage的大小没有限制,
但Chrome、Safari、iOS版Safari和Android 版WebKit都有限制,也都是2.5MB。