sessionStorage、localStorage和cookie的区别

共同点:都是保存在浏览器端、且同源的 
区别: 
1、cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递,而sessionStorage和localStorage不会自动把数据发送给服务器,仅在本地保存。cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下 
2、存储大小限制也不同,cookie数据不能超过4K,同时因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据,如会话标识。sessionStorage和localStorage虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大 
3、数据有效期不同,sessionStorage:仅在当前浏览器窗口关闭之前有效;localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie:只在设置的cookie过期时间之前有效,即使窗口关闭或浏览器关闭 
4、作用域不同,sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;localstorage在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的 
5、web Storage支持事件通知机制,可以将数据更新的通知发送给监听者 
6、web Storage的api接口使用更方便

项目实例:

同一个账号登陆,菜单权限根据登陆接口返回的数据进行判断,并将该数据存储在sessionStorage中,之后,用户如果将登陆后的首页链接复制,在不同窗口打开,sessionStorage的数据不会跟着带过去,菜单显示就会出现问题

cookie与sessionStorage机制的更多相关文章

  1. Cookie localStorage sessionStorage

    三者的异同 特性 Cookie localStorage sessionStorage 数据的生命期 可设置失效时间,默认是关闭浏览器后失效 除非被清除,否则永久保存 仅在当前会话下(tab标签页)有 ...

  2. [转载]Cookie/Session的机制与安全

    Cookie和Session是为了在无状态的HTTP协议之上维护会话状态,使得服务器可以知道当前是和哪个客户在打交道.本文来详细讨论Cookie和Session的实现机制,以及其中涉及的安全问题. 因 ...

  3. 理解Cookie和Session机制(转)

    目录[-] Cookie机制 什么是Cookie 记录用户访问次数 Cookie的不可跨域名性 Unicode编码:保存中文 BASE64编码:保存二进制图片 设置Cookie的所有属性 Cookie ...

  4. 转:理解Cookie和Session机制

    原文: 理解Cookie和Session机制 摘要: Cookie工作原理 由于HTTP是一种无状态的协议,服务器单从网络连接上无从知道客户身份.怎么办呢?就给客户端们颁发一个通行证吧,每人一个,无论 ...

  5. 关于cookie的文章(cookie与session机制)

    会话(Session)跟踪是Web程序中常用的技术,用来跟踪用户的整个会话.常用的会话跟踪技术是Cookie与Session.Cookie通过在客户端记录信息确定用户身份,Session通过在服务器端 ...

  6. 理解Cookie和Session机制

    转载: 理解Cookie和Session机制 会话(Session)跟踪是Web程序中常用的技术,用来跟踪用户的整个会话.常用的会话跟踪技术是Cookie与Session.Cookie通过在客户端记录 ...

  7. 【转】理解cookie和session机制

    cookie和session机制之间的区别与联系 具体来说cookie机制采用的是在客户端保持状态的方案.它是在用户端的会话状态的存贮机制,他需要用户打开客户端的cookie支持.cookie的作用就 ...

  8. Cookie 的运行机制以及常用规则

    一   setCookie        bool setcookie ( string name [, string value [, int expire [, string path [, st ...

  9. Cookie/Session的机制与安全

    转载自:https://harttle.land/2015/08/10/cookie-session.html Cookie和Session是为了在无状态的HTTP协议之上维护会话状态,使得服务器可以 ...

随机推荐

  1. 目标检测方法——R-FCN

    R-FCN论文阅读(R-FCN: Object Detection via Region-based Fully Convolutional Networks ) 目录 作者及相关链接 方法概括 方法 ...

  2. Linq基础+Lambda表达式对数据库的增删改及简单查询

    一.Linq to sql 类 高集成化的数据库访问技术 使用Linq可以代替之前的Ado.Net,省去了自己敲代码的实体类和数据访问类的大量工作 实体类: 添加一个Linq to sql 类 --- ...

  3. element-ui表单form和rules踩坑

    问题: 代码: <el-form ref="form" :rules="rules" :model="form" label-widt ...

  4. Python爬虫与一汽项目【综述】

    项目来源 这个爬虫项目是 去年实验室去一汽后的第一个项目(基本交工,现在处于更新维护阶段).内容大概是,获取到全国31个省份政府的关于汽车的招标公告,再用图形界面的方式展示爬虫内容.在完成政府招标采购 ...

  5. psql 存储过程

    --添加人员和虹膜注册信息 CREATE OR REPLACE FUNCTION AddPersonInfoAndIrisEnrollInfo(personName character, workSn ...

  6. .net 中写 psql 匿名函数、过程语言

    DO --关键字 $serch$ --$中间随便写, 不能用特殊符号和数字好像$ DECLARE times integer; --定义变量 rec history_depart%ROWTYPE; - ...

  7. 如何在Qt中使用自定义数据类型

    这里我们使用下面这个struct来做说明(这里不管是struct还是class都一样): struct Player { int number; QString firstName; QString ...

  8. day14带参装饰器,迭代器,可迭代对象 , 迭代器对象 ,for迭代器 , 枚举对象

    复习 ''' 函数的嵌套定义:在函数内部定义另一个函数 闭包:被嵌套的函数 -- 1.外层通过形参给内层函数传参 -- 2.验证执行 开放封闭原则: 功能可以拓展,但源代码与调用方式都不可以改变 装饰 ...

  9. JS宽高理解

    1.clentWidth和clientHeight ①加入无padding.无滚动条显示占据位置 clientWidth=style.width ②假如有padding.无滚动 clientWidth ...

  10. node一些相关

    1.Node node的核心语言是JavaScript ,基于Google的V8引擎. 2.node使用 找到当前文件所在目录 node  文件名.js 直接用绝对路径 在当前目录打开命令窗口 3.n ...