浅谈session,cookie,sessionStorage,localStorage的区别及应用场景

Js+JQuery helloweb 次浏览 已收录 评论() 扫描二维码
扫描二维码

浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式,可以利用 cookie,session 等跟服务端进行数据交互。

一、cookie和session

cookie 和 session 都是用来跟踪浏览器用户身份的会话方式。

区别:

1、保持状态:cookie 保存在浏览器端,session 保存在服务器端;

2、使用方式:

(1)cookie 机制:如果不在浏览器中设置过期时间,cookie 被保存在内存中,生命周期随浏览器的关闭而结束,这种 cookie 简称会话 cookie。如果在浏览器中设置了 cookie 的过期时间,cookie 被保存在硬盘中,关闭浏览器后,cookie 数据仍然存在,直到过期时间结束才消失。

Cookie是服务器发给客户端的特殊信息,cookie是以文本的方式保存在客户端,每次请求时都带上它

(2)session 机制:当服务器收到请求需要创建 session 对象时,首先会检查客户端请求中是否包含 sessionid。

如果有 sessionid,服务器将根据该id返回对应 session 对象。

如果客户端请求中没有 sessionid,服务器会创建新的 session 对象,并把 sessionid 在本次响应中返回给客户端。

通常使用 cookie 方式存储 sessionid 到客户端,在交互中浏览器按照规则将 sessionid 发送给服务器。

如果用户禁用 cookie,则要使用URL重写,可以通过response.encodeURL(url) 进行实现;API对 encodeURL 的结束为,当浏览器支持 Cookie 时,url 不做任何处理;当浏览器不支持 Cookie 的时候,将会重写URL将 SessionID 拼接到访问地址后。

3、存储内容:cookie 只能保存字符串类型,以文本的方式;session 通过类似与 Hashtable 的数据结构来保存,能支持任何类型的对象( session 中可含有多个对象)。

4、存储的大小:cookie:单个 cookie 保存的数据不能超过4kb;session 大小没有限制。

5、安全性:cookie:针对cookie所存在的攻击:Cookie欺骗,Cookie截获;session的安全性大于cookie。

原因如下:(1)sessionID 存储在 cookie 中,若要攻破 session 首先要攻破 cookie;

     (2)sessionID 是要有人登录,或者启动 session_start 才会有,所以攻破 cookie 也不一定能得到 sessionID;

     (3)第二次启动 session_start 后,前一次的 sessionID 就是失效了,session 过期后,sessionID 也随之失效。

     (4)sessionID 是加密的

     (5)综上所述,攻击者必须在短时间内攻破加密的 sessionID,这很难。

6、应用场景:

cookie:(1)判断用户是否登陆过网站,以便下次登录时能够实现自动登录(或者记住密码)。如果我们删除cookie,则每次登录必须从新填写登录的相关信息。

     (2)保存上次登录的时间等信息。

     (3)保存上次查看的页面

     (4)浏览计数

浅谈session,cookie,sessionStorage,localStorage的区别及应用场景

session:Session 用于保存每个用户的专用信息,变量的值保存在服务器端,通过 SessionID 来区分不同的客户。

    (1)网上商城中的购物车

    (2)保存用户登录信息

    (3)将某些数据放入 session 中,供同一用户的不同页面使用

    (4)防止用户非法登录

7、缺点:

cookie:(1)大小受限

    (2)用户可以操作(禁用)cookie,使功能受限

    (3)安全性较低

    (4)有些状态不可能保存在客户端。

    (5)每次访问都要传送 cookie 给服务器,浪费带宽。

    (6)cookie 数据有路径(path)的概念,可以限制 cookie 只属于某个路径下。

session:

    (1)Session保存的东西越多,就越占用服务器内存,对于用户在线人数较多的网站,服务器的内存压力会比较大。

    (2)依赖于cookie(sessionID保存在cookie),如果禁用cookie,则要使用URL重写,不安全

    (3)创建Session变量有很大的随意性,可随时调用,不需要开发者做精确地处理,所以,过度使用session变量将会导致代码不可读而且不好维护。

二、WebStorage

WebStorage 的目的是克服由 cookie 所带来的一些限制,当数据需要被严格控制在客户端时,不需要持续的将数据发回服务器。

WebStorage 两个主要目标:

    (1)提供一种在 cookie 之外存储会话数据的路径。

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

HTML5 的 WebStorage 提供了两种 API:localStorage(本地存储)和sessionStorage(会话存储)。

1、生命周期:localStorage:localStorage 的生命周期是永久的,关闭页面或浏览器之后 localStorage 中的数据也不会消失。

localStorage 除非主动删除数据,否则数据永远不会消失。

sessionStorage 的生命周期是在仅在当前会话下有效。sessionStorage 引入了一个“浏览器窗口”的概念,sessionStorage 是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭,即使刷新页面或者进入同源另一个页面,数据依然存在。但是 sessionStorage 在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面,sessionStorage 也是不一样的。

2、存储大小:localStorage 和 sessionStorage 的存储数据大小一般都是:5MB

3、存储位置:localStorage 和 sessionStorage 都保存在客户端,不与服务器进行交互通信。

4、存储内容类型:localStorage 和 sessionStorage 只能存储字符串类型,对于复杂的对象可以使用 ECMAScript 提供的 JSON 对象的 stringify 和 parse 来处理

5、获取方式:localStorage:window.localStorage;;sessionStorage:window.sessionStorage;。

6、应用场景:localStoragese:常用于长期登录(+判断用户是否已登录),适合长期保存在本地的数据。sessionStorage:敏感账号一次性登录;

WebStorage的优点:

(1)存储空间更大:cookie 为4KB,而 WebStorage 是5MB;

(2)节省网络流量:WebStorage 不会传送到服务器,存储在本地的数据可以直接获取,也不会像 cooki e一样每次请求都会传送到服务器,所以减少了客户端和服务器端的交互,节省了网络流量;

(3)对于那种只需要在用户浏览一组页面期间保存而关闭浏览器后就可以丢弃的数据,sessionStorage 会非常方便;

(4)快速显示:有的数据存储在 WebStorage 上,再加上浏览器本身的缓存。获取数据时可以从本地获取会比从服务器端获取快得多,所以速度更快;

(5)安全性:WebStorage 不会随着 HTTP header 发送到服务器端,所以安全性相对于 cookie 来说比较高一些,不会担心截获,但是仍然存在伪造问题;

(6)WebStorage提供了一些方法,数据操作比 cookie 方便;

setItem (key, value) // 保存数据,以键值对的方式储存信息。
getItem (key)        // 获取数据,将键值传入,即可获取到对应的value值。
removeItem (key)     // 删除单个数据,根据键值移除对应的信息。
clear ()             // 删除所有的数据
key (index)          // 获取某个索引的key


原文链接:HelloWeb前端网 » 浅谈session,cookie,sessionStorage,localStorage的区别及应用场景 » 感谢您的浏览,希望能有所帮助。

欢迎您加入“Helloweb” 学习交流群:HelloWeb-学习交流群 196291215 共同交流并结识同行,在这里说出您的收获与感想或有什么不同的观点,我们期待您的留言,分享,让我们一起进步!

喜欢 ()or分享