本地客户端(浏览器)查看三者信息:

HTML4的本地存储:cookie

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

一、cookiesession

  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
    6. 应用场景:

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

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

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

          (4)浏览计数

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

      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变量将会导致代码不可读而且不好维护。

HTML5的本地存储:Web Storage  

  HTML5 中与本地存储相关的两个重要内容:Web Storage 和本地数据库。其中,Web Storage存储机制是对HTML4中cookie存储机制的一个改善。由于cookie存储机制有很多缺点,HTML5不再使用它,转而使用改良后的Web Storage存储机制。本地数据库是HTML5中新增的一个功能,使用它可以在客户端本地建立一个数据库,原本必须保存在服务器端数据库中的内容现在可以直接保存在客户端本地了,这大大减轻了服务器端的负担,同时也加快了访问数据的速度。

  我们知道,在HTML4中可以使用cookie在客户端中存储用户名等简单的用户信息,但是,通过长期的使用,使用cookie存储痛就数据存在几个问题:

    1.大小:cookie的大小被限制在4KB

    2.带宽:cookie是随HTTP请求一起被发送的,因此会浪费一部分发送cookie时使用的带宽

    3.复杂性:要正确的操纵cookie是很困难的

  针对这些问题,在HTML5中,重新提供了一种在客户端本地保存数据的功能,即Web Storage,其中提供了两种API:localStorage(本地存储)和sessionStorage(会话存储),Web Storage的目的是克服由cookie所带来的的一些限制,当数据需要被严格控制在客户端时,不需要持续的将数据发回给服务器

Web Storage的优点   

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

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

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

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

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

一、localStorage(永久保存)

  将数据保存在session对象中。所谓session,是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间,也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。

二、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:敏感账号一次性登录;

localStorage、sessionStorage和cookie的区别(图示)

localStorage、sessionStorage和cookie的区别的更多相关文章

  1. 本地存储常用方式 localStorage, sessionStorage,cookie 的区别 和 服务器存储session

    本地存储:把一些信息存储到客户端本地(主要目的有很多,其中有一个就是实现多页面之间的信息共享)       1. 离线缓存(xxx.manifest)  H5处理离线缓存还是存在一些硬伤的,所以真实项 ...

  2. localstorage sessionstorage和cookie的区别

    基本概念 cookie:是网景公司的前雇员在1993年发明.它的主要用于保存登陆信息,比如登陆某个网站市场可以看到'记住密码’,这就是通过在cookie中存入一段辨别用户身份的数据来实现的. sess ...

  3. 前端 JS,localStorage/sessionStorage、cookie 及 url 等实现前台数据共享、传输

    需求是这样的:需要统计用户公司某款产品用户的回馈情况,美工给的设计多个psd,每个页面里面都有一个选择题,让用户选择自己的答案,最后经过几次选择之后在最后一个页面统一提交到后台!所以这里引出的技术需求 ...

  4. localStorage sessionStorage 和cookie等前端存储方式总结

    localStorage sessionStorage 和cookie localStorage localStorage是本地存储的,除非清空本地数据 localStorage不会自动把数据发给服务 ...

  5. cookie和localstorage sessionStorage的概念、区别、使用场景

    本文分为三大板块: 1 webStorage的概念 2 cookie/localStorage/sessionStorage的介绍 3 三者之间的共同点和区别 **所有代码引用均来自 作者:OBKor ...

  6. localStorage、sessionStorage、cookie的区别

    localStorage: 存储的内容大概20MB 不同浏览器不能共享,但是在同一浏览器的不同窗口中可以共享 永久生效,它的数据是存储的硬盘上,并不会随着页面或者浏览器的关闭而清楚,需手动清除 ses ...

  7. localStorage. sessionStorage、 Cookie不共同点:(面试题)

    ●存储大小的不同: localStorage的大小一般为5M sessionStorage的大小一般为5M cookies的大小一般为4K ●有效期不同: 1.localStorage的有效期为永久有 ...

  8. localStorage,sessionStorage和cookie的区别

    sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web请求之间保存数据.有了本地数据,就可以避免数据在浏览器和服务器间不必 ...

  9. localStorage、sessionStorage、Cookie的区别及用法

    1.webstorage 本地存储,存储在客户端,包括localStorage和sessionStorage. (1)localStorage:生命周期是永久,这意味着除非用户显示在浏览器提供的UI上 ...

随机推荐

  1. kotlin标准委托之阻止属性的赋值操作

    import kotlin.properties.Delegates fun main(arg: Array<String>) { val user = user() user.name= ...

  2. 假如React没了JSX

    如题,想必React大家早已不陌生,而React里面的JSX都是玩的得心应手了,但是假如说React里面没有了React那会是一种什么样的情形呢,我们来简单的看一下. 首先我们来实现一个简单的list ...

  3. 基于文件系统(及MySQL)使用Java实现MapReduce

    实现这个代码的原因是: 我会MapReduce,但是之前都是在AWS EMR上,自己搭过伪分布式的,但是感觉运维起来比较困难: 我就MySQL会一点(本来想用mongoDB的但是不太会啊) 数据量不是 ...

  4. Kuhn-Munkras算法解决二分图最优权值匹配

    在看这篇博文之前建议看一下上一篇匈牙利法解决二分图最大匹配问题: https://www.cnblogs.com/fangxiaoqi/p/10808729.html 这篇博文参考自:https:// ...

  5. golang web框架设计1:框架规划

    GO WEB 编程13节,如何设计一个web框架 学习谢大的web框架设计 总体介绍 实现一个简易的web框架,我们采用mvc模式来进行开发. model:模型,代表数据结构.通常来说,模型类时包含查 ...

  6. 初学django框架 (urls,include子路由,render模板渲染)(一)

    一.urls url的使用为了告诉django哪个url调用那一段代码 如上左图所示,后面的test,test1如下图所示,为视图函数,通过前面的路径,调用后面函数的代码: 只有输入正确的url才会在 ...

  7. 【Gstreamer开发】用 GStreamer 简化 Linux 多媒体开发

    原文:http://www.ibm.com/developerworks/cn/linux/l-gstreamer/ 一.基本概念 GStreamer 作为 GNOME 桌面环境推荐的流媒体应用框架, ...

  8. Vue CLI 3 如何自定义 js 的文件名

    参考链接:https://blog.csdn.net/weixin_33979363/article/details/88742342

  9. JavaSE基础(七)--Java流程控制语句之switch case 语句

    Java switch case 语句 switch case 语句判断一个变量与一系列值中某个值是否相等,每个值称为一个分支. 语法 switch case 语句语法格式如下: switch(exp ...

  10. [AT2062] ~K Perm Counting

    AT2602 , Luogu 求对于 \(n\) 个数的排列 , 有多少种方案满足对于所有的 \(i\) , \(|P_i - i| != K\) , 答案对 \(924844033\) 取模 . \ ...