HTML5技术

数据存储的两种方式:Cookie 和Web Storage - 不羁的少年

字号+ 作者:H5之家 来源:H5之家 2017-02-13 17:01 我要评论( )

数据存储的两种方式:Cookie 和Web Storage 1、Cookie Cookie 的作用就像你去超市购物时,第一次给你办张购物卡,这个购物卡里存放了一些你的个人信息,下次你再来这个连锁超市时,超市会识别你的购物卡,下次直接购物就好了。通俗地说,就是当一个用户通过

数据存储的两种方式:Cookie 和Web Storage

1、Cookie

Cookie的作用就像你去超市购物时,第一次给你办张购物卡,这个购物卡里存放了一些你的个人信息,下次你再来这个连锁超市时,超市会识别你的购物卡,下次直接购物就好了。通俗地说,就是当一个用户通过 HTTP 协议访问一个服务器的时候,这个服务器会将一些 Key/Value 键值对返回给客户端浏览器,并给这些数据加上一些限制条件,在条件符合时这个用户下次访问这个服务器的时候,数据又被完整地带回给服务器。

Cookie最初是在客户端用于存储会话信息的,其要求服务器对任意HTTP请求发送Set-CookieHTTP头作为响应的一部分。cookie
以name为名称,以value为值,名和值在传送时都必须是URL编码的。浏览器会存储这样的会话信息,在这之后,通过为每个请求添加Cookie
HTTP头将信息发送回服务器。

Cookie的构成

graphic

Cookie的优点
  • 可配置到期规则: Cookie 可以在浏览器会话结束时到期,或者可以在客户端计算机上无限期存在,这取决于客户端的到期规则。

  • 不需要任何服务器资源: Cookie 存储在客户端并在发送后由服务器读取。

  • 简单性: Cookie 是一种基于文本的轻量结构,包含简单的键值对。

  • 数据持久性: 虽然客户端计算机上 Cookie 的持续时间取决于客户端上的 Cookie 过期处理和用户干预,但Cookie 通常是客户端上持续时间最长的数据保留形式。

  • Cookie的弊端

    cookie虽然在持久保存客户端数据方面提供了方便,分担了服务器存储的负担,但还是有很多局限性的。

  • Cookie数量和长度的限制:每个域的cookie总数是有限的,IE6或更低版本最多20个cookie;IE7和之后的版本最后可以有50个;Firefox最多50个;chrome和Safari没有做硬性限制。cookie的长度也有限制,最好将cookie控制在4095B以内。否则会被截掉。

  • 性能问题:由于所有cookie都会由浏览器作为请求头发送,所以在cookie中存储大量信息会影响到特定域的请求性能

  • 2、Web Storage

    Web Storage 的目的是克服由cookie带来的一些限制,当数据需要被严格控制在客户端时,无需持续的将数据发回服务器。其主要目的在于:

  • 提供一种在cookie之外存储会话数据的途径;

  • 提供一种存储大量可以跨会话存在的数据的机制。

  • Storage类型

    Storage类型提供最大的存储空间(因浏览器而异)来存储名值对儿。其只能存储字符串,非字符串数据会在存储之前被转换成字符串。

    sessionStorage对象


    sessionStorage
    对象主要用于仅针对会话的小段数据的存储。

    globalStorage对象

    目的:跨越会话存储数据。要使用globalStorage对象,首先要指定哪些域可以访问该数据,通过方括号标记来实现:

    //保存数据

    在使用globalStorage对象时最好要指定域名,如果事先不能确定域名,那么使用location.host作为属性名比较安全。

    如果不使用removeItem()或者delete删除,或者用户未清除浏览器缓存,存储在globalStorage属性中的数据会一直保存在磁盘上,因此globalStorage很适合在客户端存储文档或者长期保存用户偏好设置。

    localStorage对象

    总结一下:

    在较高版本的浏览器中,js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage来取代globalStorage。
    html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage。
    sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。
    而localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

    Web storage和cookie的区别

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

    3

     

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • localStorage 如何存储JSON数据并读取JSON数据 - 陌年古城

      localStorage 如何存储JSON数据并读取JSON数据 - 陌年古城

      2017-02-13 18:00

    • In-Memory:内存数据库 - 悦光阴

      In-Memory:内存数据库 - 悦光阴

      2017-01-08 11:00

    • 【第二篇】ASP.NET MVC快速入门之数据注解(MVC5+EF6) - 三生石上

      【第二篇】ASP.NET MVC快速入门之数据注解(MVC5+EF6) - 三生石上

      2016-12-27 13:00

    • 【第一篇】ASP.NET MVC快速入门之数据库操作(MVC5+EF6) - 三生石上

      【第一篇】ASP.NET MVC快速入门之数据库操作(MVC5+EF6) - 三生石上

      2016-12-23 17:00

    网友点评
    s