有时需要将网页中的一些数据保存在浏览器端,当下次访问网页时,不需要再次向服务器请求数据,直接就可以从本地读取数据。
浏览器端
(1)cookie:cookie会随着每次HTTP请求头信息一起发送,无形中增加了网络流量,另外,cookie能存储的数据容量有限,根据浏览器类型不同而不同,IE6大约只能存储2K。HTTP请求发送时,会把保存在该请求域名下的所有cookie值发送给web服务器,因此服务器端脚本是可以读、写存储在客户端的cookie的操作。
cookie的有效期:cookie默认情况下的有效期是很短暂的,一旦用户关闭浏览器,cookie保存的数据就会丢失。如果想要延长cookie的有效期,可以通过设置HTTP头信息中的cache-control属性的max-age值,或者修改HTTP头信息中的expires属性的值来延长有效期。
每个web服务器(域名)保存的cookie数不能超过50个,每个cookie保存的数据不能超过4KB,如果超过了4KB(IE6大约只能存储2K),服务器会处理不了。
(2)WebStorage(localStorage、sessionStorage):localStorge 比 cookie 存的更多,获取更方便,而且存储内容不会随请求发送给服务器;localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同。localStorage 方法存储的数据没有时间限制。
localStorage的缺点:
1)浏览器的大小不统一,并且在IE8以上的IE版本才支持localStorage这个属性;
2)目前所有的浏览器中都会把localStorage的值类型限定为string类型,这个在对我们日常比较常见的JSON对象类型需要一些转换;
3)localStorage在浏览器的隐私模式下面是不可读取的;
4)localStorage本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,会导致页面变卡;
5)localStorage不能被爬虫抓取到。
sessionStorage与localStorage的唯一一点区别就是localStorage属于永久性存储,而sessionStorage属于当会话结束的时候,sessionStorage中的键值对就会被清空。
(3)userData:IE浏览器专属,容量达到640K。
(4)indexedDB
(5)Flash ShareObject
这种方式能能解决上面提到的cookie存储的两个弊端,而且能够跨浏览器,应该说是目前最好的本地存储方案。不过,需要在页面中插入一个Flash,当浏览器没有安装Flash控件时就不能用了。所幸的是,没有安装Flash的用户极少。
缺点:需要安装Flash插件。
(6)globalStorage
使用于Firefox2+的火狐浏览器,类似于IE的userData。
服务器端
(1)session:需要cookie支持