浏览器存储

一,什么是cookie?

  Cookie是保存在客户端中的一小段文本信息,在你浏览网页的时候,浏览器就会将其存储在硬盘上,下次访问同一地址的时候,只要cookie没有失效,浏览器就会将其信息再次发给服务器。所以,cookie伴随着用户请求和页面在web服务器和浏览器之间进行传递。cookie中包含着用户每次访问站点的时服务器端可以读取到的信息。

二、cookie 解决了什么问题?

  解决了同一浏览器访问不同网页的时候,信息不能共享的问题。

为什么呢?因为http协议是无状态的,对于同一个浏览器发出的多个请求,web服务器是无法区分来源的。cookie解决了这个问题。

 

三、cookie 是怎么交互的?

  是通过http的响应头和请求头使客户端和服务器端进行交互的。

cookie是放在http包头中一起发送的。(发送方式3种,get,post,cookie)

四、cookie的参数以及其含义

 

参数 含义 取值 备注
name=<value>[名称=<值>] name表示cookie的key value 表示key的取值 存储value的值时候必须转义,一般用encodeURICompoment 进行转义,对key的合法性也必须进行检查
[; expires=<date>] cookie的过期日期, 以ms为单位,GMT为标准 缺省为空,该cookie只能被浏览器的
[; domain=<domain>] 生效的域名 域名   可以缺省,即为当前网页的域名
[; path=<path>] 生效的路径 /path 可以缺省,即为当前网页所在的目录,cookie不能跨Path访问,但是可以访问到父级目录设置的cookie
[; secure] 安全性 true/false 可以缺省,表示cookie只能在https链接中被浏览器传递到服务器端进行会话验证,http是不会传递该信息的

 

 五,cookie在不同浏览器是有差异的

差异反应在个数和存储大小上面。

 

六,利用cookie可以做什么?

  (1)保存用户的登陆状态,用户进行登陆,成功登陆后,服务器生成特定的cookie返回给客户端,客户端下次访问该域名下的任何页面,将该cookie的信息发送给服务器,服务器经过检验,

来判断用户是否登陆。

  (2)记录用户的行为,例如,京东商场左下角有一个最近访问的产品记录信息,当当网上有你最近浏览过的书籍信息,都是根据用户访问页面,记录到cookie的信息来制作的。

  (3)电商购物车的处理,因为在不同页面,点击添加到购物车,这个信息也是记到了cookie里面。结账的时候统一提交

  (4)定制页面。如果网站提供了换肤的功能,我们这个时候也是将他记录到cookie里面,以便下次访问还是保持原来的风格页面。

 

七,cookie的安全性

    cookie是不安全的,因为他可以被用户篡改。同时由于cookie存储大量的信息,一旦这些信息泄露出来,也是危害很大的,所以,我们要慎用cookie

 

二, Cookie的弊端

cookie虽然在持久保存客户端数据提供了方便,分担了服务器存储的负担,但还是有很多局限性的。
每个特定的域名下最多生成20个cookie

1.IE6或更低版本最多20个cookie
2.IE7和之后的版本最后可以有50个cookie。
3.Firefox最多50个cookie
4.chrome和Safari没有做硬性限制

IEOpera 会清理近期最少使用的cookieFirefox会随机清理cookie

cookie的最大大约为4096字节,为了兼容性,一般不能超过4095字节。

IE 提供了一种存储可以持久化用户数据,叫做uerData,从IE5.0就开始支持。每个数据最多128K,每个域名下最多1M。这个持久化数据放在缓存中,如果缓存没有清理,那么会一直存在。

 

优点:极高的扩展性和可用性

1.通过良好的编程,控制保存在cookie中的session对象的大小。
2.通过加密和安全传输技术(SSL),减少cookie被破解的可能性。
3.只在cookie中存放不敏感数据,即使被盗也不会有重大损失。
4.控制cookie的生命期,使之不会永远有效。偷盗者很可能拿到一个过期的cookie。

缺点:

1.`Cookie`数量和长度的限制。每个domain最多只能有20条cookie,每个cookie长度不能超过4KB,否则会被截掉。

2.安全性问题。如果cookie被人拦截了,那人就可以取得所有的session信息。即使加密也与事无补,因为拦截者并不需要知道cookie的意义,他只要原样转发cookie就可以达到目的了。

3.有些状态不可能保存在客户端。例如,为了防止重复提交表单,我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端,那么它起不到任何作用。

2.浏览器本地存储

在较高版本的浏览器中,js提供了sessionStorageglobalStorage。在HTML5中提供了localStorage来取代globalStorage

html5中的Web Storage包括了两种存储方式:sessionStoragelocalStorage

sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。

localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

3.web storage和cookie的区别

Web Storage的概念和cookie相似,区别是它是为了更大容量存储设计的。Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外cookie还需要指定作用域,不可以跨域调用。

除此之外,Web Storage拥有setItem,getItem,removeItem,clear等方法,不像cookie需要前端开发者自己封装setCookie,getCookie

但是Cookie也是不可以或缺的:Cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在 ,而Web Storage仅仅是为了在本地“存储”数据而生,微信是localstorage的典范。

浏览器的支持除了IE7及以下不支持外,其他标准浏览器都完全支持(ie及FF需在web服务器里运行),值得一提的是IE总是办好事,例如IE7、IE6中的UserData其实就是javascript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持web storage

localStoragesessionStorage都具有相同的操作方法,例如setItem、getItemremoveItem

 

 

参考:

(1)http://www.cnblogs.com/yupeng/archive/2012/05/24/2515228.html

(2)http://segmentfault.com/u/trigkit4

 

posted on 2015-10-05 15:33  HGonlyWJ  阅读(555)  评论(0编辑  收藏  举报

W3C中国
阮老师的网络日志
canvas
runoob
迷渡
并发编程网
原生JS例子
前端外刊评论