Cookie,WebStorage对比总结

Cookie

  1. 简介

Cookie,指某些网站为了辨别用户身份而存储在用户本地终端上的数据。

  1. 分类

按 Cookie 存储在客户端的位置,可分为*内存Cookie*和*硬盘Cookie*。

内存 Cookie由浏览器维护,保存在内存中,浏览器关闭后就消失了,所以其生存时间很短。

硬盘Cookie存储在硬盘里,硬盘Cookie有一个过期时间,除非用户手工清理或者到了过期时间,否则硬盘Cookie不会被删除。

所以按存在时间分的话,可分为*持久Cookie*和*非持久Cookie*。

  1. 用途

Cookie 一个很典型的应用是在登录一个网站时,网站一般会让用户输入用户名和密码,并且会有个是否“下次自动登录”的选项。
如果用户勾选了自动登录,那么用户在下次访问统一个网站的时候会发现没有输入用户名和密码就已经登录了。这因为用户在
前一次登录成功后,服务器发送了包含登录凭据(加密形式的用户名和密码)的 Cookie 到用户的硬盘上。之后用户再次登录时,
如果该 Cookie 还未过期,浏览器会发送该 Cookie 到服务端进行验证,所以用户就不必再输入用户名和密码了。

  1. Cookie的缺点

1). Cookie 会被附加在每一个 HTTP 请求中,所以无形中增加了流量。

2). 由于在 HTTP 请求中的 Cookie 是明文传递的,所以有安全性问题。

3). Cookie 大小限制在4KB左右,所以对于需要复杂的存储需求来说有限制。


Web Storage

  1. 简介

我们现在说的 HTML5 本地存储,一般指的就是 Web Storage 规范。使用 Web Storage,web 应用可以将数据存储在本地浏览器之中。在 HTML5 之前,应用数据被存储在 Cookie 中,包含服务请求里。

对于不同网站或者不同的浏览器 Web Storage 数据存储于不同区域,并且只有同一浏览器下的对应网站能够访问数据。

  1. 分类

Web Storage分为两种,*Local Storage* 和 Session Storage

1). Session Storage 如其名字一样存储的是会话( session )数据(这里的 session 不是指服务器上的 session)。之所以称之为 session 是因为,期存储的数据在会话结束之后就会销毁,即关闭浏览器后 session storage 里存储的数据随之被销毁。

2). Local Storage 是真正意义上的持久化本地存储,它没有 Session Storage 的到期时间,如果不主动删除数据,数据会一直保留。

  1. 用途

并不是所有数据都是服务端需要的,我用 local storage 做过两个功能,一是用户存储 hbrid APP 上用户登陆凭证,用户再第一次登陆成功后,只要不进行注销推出操作,用户之后打开 APP 直接登陆。二是存储用户预操作的内容。

  1. 缺点

    1). IE8以下不支持。

    2). 浏览器隐私模式下不可读取。
    3). 如果忘记删除数据,则数据会一直保留在浏览器端,在某种程度上来说,造成资源浪费。可以自己写个过期时间来删除数据。


  • 对比
特性 Cookie Local Storage Session Storage
生命周期 cookie由服务端生成,用户标识用户身份 一直存在,除非被清除 会话状态下存在,推出会话就被销毁
数据大小 4K左右 5MB左右 5MB左右
与服务端通信 每次都会包含在 HTTP 请求头中 客户端保存,根据实际功能可用提交需要的数据 客户端保存,根据实际功能可用提交需要的数据
易用性 键值对集合,操作麻烦 键值对集合,操作简单 键值对集合,操作简单
Comments
Write a Comment