浏览器存储

一,什么是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

时间: 2024-11-03 03:46:27

浏览器存储的相关文章

浏览器存储及使用

转载自  http://geek.csdn.net/news/detail/98519 伴随着WEB的发展,浏览器的存储方式及技术不断的发生更改,从刚开始的Cookie,到 localStorage,sessionStorage,再到IndexedDB,再到现在的Web SQL,作为一名合格的前端开发,当然需要对这些技术了如指掌并熟练掌握,本文将比较全面的介绍常见的浏览器存储以及其使用. 1. Cookie Cookie是一个用户通过浏览器浏览网站产出的信息的票根,Cookies通常被用来标示一

浏览器存储:cookie

Cookie是什么:cookie是指存储在用户本地终端上的数据,同时它是与具体的web页面或者站点相关的.Cookie数据会自动在web浏览器和web服务器之间传输,也就是说HTTP请求发送时,会把保存在该请求域名下的所有cookie值发送给web服务器,因此服务器端脚本是可以读.写存储在客户端的cookie的操作. cookie的有效期:cookie默认情况下的有效期是很短暂的,一旦用户关闭浏览器,cookie保存的数据就会丢失.如果想要延长cookie的有效期,可以通过设置HTTP头信息中的

web浏览器存储的不同方式:

效果图:     浏览器存储的不同方式: (1)生命期为只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭. 存放数据大小为4K左右 .有个数限制(各浏览器不同),一般不能超过20个.与服务器端通信:每次都会携带在HTTP头中,如果使用cookie保存过多数据会带来性能问题. (2)sessionStorage仅在当前会话下有效,关闭页面或浏览器后被清除.存放数据大小为一般为5MB,而且它仅在客户端(即浏览器)中保存,不参与和服务器的通信.源生接口可以接受,亦可再次封装来对Obje

深入了解浏览器存储:对比Cookie、LocalStorage、sessionStorage与IndexedDB

摘要: 对比Cookie.LocalStorage.sessionStorage与IndexedDB 作者:浪里行舟 Fundebug经授权转载,版权归原作者所有. 前言 随着移动网络的发展与演化,我们手机上现在除了有原生 App,还能跑"WebApp"--它即开即用,用完即走.一个优秀的 WebApp 甚至可以拥有和原生 App 媲美的功能和体验.WebApp 优异的性能表现,有一部分原因要归功于浏览器存储技术的提升.cookie存储数据的功能已经很难满足开发所需,逐渐被WebSto

浅谈浏览器存储(cookie、localStorage、sessionStorage)

今天我们从前端的角度了解一下浏览器存储,我们常见且常用的存储方式主要由两种:cookie.webStorage(localStorage和sessionStorage).下面我们来一一认识它们. Cookie基于HTTP规范,用来识别用户. Cookie是服务器发送到浏览器的一小段数据,会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上. Cookie诞生之初的作用就是解决HTTP的无状态请求,用来记录一些用户相关的一些状态. 会话状态管理(如用户登录状态.购物车.游戏分数或其它需要记

六、浏览器存储

多种浏览器存储方式并存,如何选择? Cookie 特点: 因为HTTP请求无状态,所以需要cookie去维持客户端状态 过期时间 expire cookie的生成方式(1. http response header中的set-cookie,  2. js中可以通过document.cookie可以读写cookie) 仅仅作为浏览器存储(大小4KB左右,能力被localstorage替代) Cookie(是一个域名维度下的概念,只要是这个域名下的所有请求都会携带cookie,但是,是不是这个域名下

深入了解浏览器存储:对比Cookie、LocalStorage、sessionStorage与IndexedDB(转)

前言 随着移动网络的发展与演化,我们手机上现在除了有原生 App,还能跑“WebApp”——它即开即用,用完即走.一个优秀的 WebApp 甚至可以拥有和原生 App 媲美的功能和体验.WebApp 优异的性能表现,有一部分原因要归功于浏览器存储技术的提升.cookie存储数据的功能已经很难满足开发所需,逐渐被WebStorage.IndexedDB所取代,本文将介绍这几种存储方式的差异和优缺点. 想阅读更多优质文章请猛戳GitHub博客 一.Cookie 1. Cookie的来源 Cookie

性能分析-浏览器存储

前端性能分析 浏览器存储 浏览器是由多种存储方式的,如何选择他们呢? cookie 因为HTTP请求无状态,所以需要cookie去维持客户端状态 过期时间 expire cookie的生成方式 http response header中的set-cookie js中可以通过document.cookie可以读写cookie 仅仅作为浏览器存储(大小4KB左右,能力被localstorage替代) cookie中在相关域名下面 -- cdn的流量损耗 httponly localstorage =

浏览器存储的密码是一个潜在的威胁

特将自己遇到的情况 跟大家分析下,避免大家中招! 情形是这样的:之前本人丢了一台iphone,已经收到过两次钓鱼连接,比较谨慎,用了mac 本去登陆的,相安无事! 最后一次又收到了钓鱼连接,手欠的用之前登陆过icloud账号的windows pc 去登陆的.然后中招了!密码泄露! 分析: 我的浏览器是google chrome,设置了保存密码. 点击钓鱼链接时,链接盗取了chrome 存储密码的文件. chrome 将保存的密码存储到 C:\Users\lenovo\AppData\Local\