cookie代码加时间多久出现一次_Cookie已凉，Web存储该这么做！

脚本之家

你与百万开发者在一起

本文经授权转自公众号CSDN

(ID&＃xff1a;CSDNnews)

作者 | 浪里行舟

责编 | 郭芮

随着移动网络的发展与演化&＃xff0c;我们手机上现在除了有原生 App&＃xff0c;还能跑“WebApp”——它即开即用&＃xff0c;用完即走。一个优秀的 WebApp 甚至可以拥有和原生 App 媲美的功能和体验。

WebApp 优异的性能表现&＃xff0c;有一部分原因要归功于浏览器存储技术的提升。COOKIE存储数据的功能已经很难满足开发所需&＃xff0c;逐渐被WebStorage、IndexedDB所取代&＃xff0c;本文将介绍这几种存储方式的差异和优缺点。

1

COOKIE

1、COOKIE的来源

COOKIE 的本职工作并非本地存储&＃xff0c;而是“维持状态”。因为HTTP协议是无状态的&＃xff0c;HTTP协议自身不对请求和响应之间的通信状态进行保存&＃xff0c;通俗来说&＃xff0c;服务器不知道用户上一次做了什么&＃xff0c;这严重阻碍了交互式Web应用程序的实现。

在典型的网上购物场景中&＃xff0c;用户浏览了几个页面&＃xff0c;买了一盒饼干和两瓶饮料。最后结帐时&＃xff0c;由于HTTP的无状态性&＃xff0c;不通过额外的手段&＃xff0c;服务器并不知道用户到底买了什么&＃xff0c;于是就诞生了COOKIE。它就是用来绕开HTTP的无状态性的“额外手段”之一。服务器可以设置或读取COOKIEs中包含信息&＃xff0c;借此维护用户跟服务器会话中的状态。

我们可以把COOKIE 理解为一个存储在浏览器里的一个小小的文本文件&＃xff0c;它附着在 HTTP 请求上&＃xff0c;在浏览器和服务器之间“飞来飞去”。它可以携带用户信息&＃xff0c;当服务器检查 COOKIE 的时候&＃xff0c;便可以获取到客户端的状态。

在刚才的购物场景中&＃xff0c;当用户选购了第一项商品&＃xff0c;服务器在向用户发送网页的同时&＃xff0c;还发送了一段COOKIE&＃xff0c;记录着那项商品的信息。当用户访问另一个页面&＃xff0c;浏览器会把COOKIE发送给服务器&＃xff0c;于是服务器知道他之前选购了什么。用户继续选购饮料&＃xff0c;服务器就在原来那段COOKIE里追加新的商品信息。结帐时&＃xff0c;服务器读取发送来的COOKIE就行了。

2、什么是COOKIE及应用场景&＃xff1f;

COOKIE指某些网站为了辨别用户身份而储存在用户本地终端上的数据(通常经过加密)。 COOKIE是服务端生成&＃xff0c;客户端进行维护和存储。通过COOKIE,可以让服务器知道请求是来源哪个客户端&＃xff0c;就可以进行客户端状态的维护&＃xff0c;比如登陆后刷新&＃xff0c;请求头就会携带登陆时response header中的set-COOKIE,Web服务器接到请求时也能读出COOKIE的值&＃xff0c;根据COOKIE值的内容就可以判断和恢复一些用户的信息状态。

如上图所示&＃xff0c;COOKIE 以键值对的形式存在。

典型的应用场景有&＃xff1a;

• 记住密码&＃xff0c;下次自动登录&＃xff1b;

• 购物车功能&＃xff1b;

• 记录用户浏览数据&＃xff0c;进行商品(广告)推荐。

3、COOKIE的原理及生成方式

COOKIE的原理&＃xff1a;

第一次访问网站的时候&＃xff0c;浏览器发出请求&＃xff0c;服务器响应请求后&＃xff0c;会在响应头里面添加一个Set-COOKIE选项&＃xff0c;将COOKIE放入到响应请求中&＃xff0c;在浏览器第二次发请求的时候&＃xff0c;会通过COOKIE请求头部将COOKIE信息发送给服务器&＃xff0c;服务端会辨别用户身份&＃xff0c;另外&＃xff0c;COOKIE的过期时间、域、路径、有效期、适用站点都可以根据需要来指定。

COOKIE的生成方式主要有两种&＃xff1a;

• 生成方式一&＃xff1a;http response header中的set-COOKIE

我们可以通过响应头里的 Set-COOKIE 指定要存储的 COOKIE 值。默认情况下&＃xff0c;domain 被设置为设置 COOKIE 页面的主机名&＃xff0c;我们也可以手动设置 domain 的值。

Set-COOKIE: 

当COOKIE的过期时间被设定时&＃xff0c;设定的日期和时间只与客户端相关&＃xff0c;而不是服务端。

• 生成方式二&＃xff1a;js中可以通过document.COOKIE可以读写COOKIE&＃xff0c;以键值对的形式展示

例如我们在掘金社区控制台输入以下三句代码&＃xff0c;便可以在Chrome 的 Application 面板查看生成的COOKIE&＃xff1a;

document.COOKIE&＃61;

document.COOKIE&＃61;

document.COOKIE&＃61;

从上图中我们可以得出&＃xff1a;

Domain 标识指定了哪些域名可以接受COOKIE。如果没有设置domain&＃xff0c;就会自动绑定到执行语句的当前域。 如果设置为”.baidu.com”,则所有以”baidu.com”结尾的域名都可以访问该COOKIE&＃xff0c;所以在掘金社区上读取不到第三条代码存储COOKIE值。

4、COOKIE的缺陷

• COOKIE 不够大

COOKIE的大小限制在4KB左右&＃xff0c;对于复杂的存储需求来说是不够用的。当 COOKIE 超过 4KB 时&＃xff0c;它将面临被裁切的命运。这样看来&＃xff0c;COOKIE 只能用来存取少量的信息。此外很多浏览器对一个站点的COOKIE个数也是有限制的。

这里需注意&＃xff1a;各浏览器的COOKIE每一个name&＃61;value的value值大概在4k&＃xff0c;所以4k并不是一个域名下所有的COOKIE共享的,而是一个name的大小。

• 过多的 COOKIE 会带来巨大的性能浪费

COOKIE 是紧跟域名的。同一个域名下的所有请求&＃xff0c;都会携带 COOKIE。大家试想&＃xff0c;如果我们此刻仅仅是请求一张图片或者一个 CSS 文件&＃xff0c;我们也要携带一个 COOKIE 跑来跑去(关键是 COOKIE 里存储的信息并不需要)&＃xff0c;这是一件多么劳民伤财的事情。COOKIE 虽然小&＃xff0c;请求却可以有很多&＃xff0c;随着请求的叠加&＃xff0c;这样的不必要的 COOKIE 带来的开销将是无法想象的。

COOKIE是用来维护用户信息的&＃xff0c;而域名(domain)下所有请求都会携带COOKIE&＃xff0c;但对于静态文件的请求&＃xff0c;携带COOKIE信息根本没有用&＃xff0c;此时可以通过cdn(存储静态文件的)的域名和主站的域名分开来解决。 - 由于在HTTP请求中的COOKIE是明文传递的&＃xff0c;所以安全性成问题&＃xff0c;除非用HTTPS。

5、COOKIE与安全

HttpOnly 不支持读写&＃xff0c;浏览器不允许脚本操作document.COOKIE去更改COOKIE&＃xff0c; 所以为避免跨域脚本 (XSS) 攻击&＃xff0c;通过Javascript的 Document.COOKIE API无法访问带有 HttpOnly 标记的COOKIE&＃xff0c;它们只应该发送给服务端。如果包含服务端 Session 信息的 COOKIE 不想被客户端 Javascript 脚本调用&＃xff0c;那么就应该为其设置 HttpOnly 标记。

Set-COOKIE: 

标记为 Secure 的COOKIE只应通过被HTTPS协议加密过的请求发送给服务端。但即便设置了 Secure 标记&＃xff0c;敏感信息也不应该通过COOKIE传输&＃xff0c;因为COOKIE有其固有的不安全性&＃xff0c;Secure 标记也无法提供确实的安全保障。

为了弥补 COOKIE 的局限性&＃xff0c;让“专业的人做专业的事情”&＃xff0c;Web Storage 出现了。

HTML5中新增了本地存储的解决方案——Web Storage&＃xff0c;它分成两类&＃xff1a;sessionStorage和localStorage。这样有了WebStorage后&＃xff0c;COOKIE能只做它应该做的事情了——作为客户端与服务器交互的通道&＃xff0c;保持客户端状态。

2

LocalStorage

1、LocalStorage的特点

• 保存的数据长期存在&＃xff0c;下一次访问该网站的时候&＃xff0c;网页可以直接读取以前保存的数据&＃xff1b;

• 大小为5M左右&＃xff1b;

• 仅在客户端使用&＃xff0c;不和服务端进行通信&＃xff1b;

• 接口封装较好。

基于上面的特点&＃xff0c;LocalStorage可以作为浏览器本地缓存方案&＃xff0c;用来提升网页首屏渲染速度(根据第一请求返回时&＃xff0c;将一些不变信息直接存储在本地)。

2、存入/读取数据

localStorage保存的数据&＃xff0c;以“键值对”的形式存在。也就是说&＃xff0c;每一项数据都有一个键名和对应的值。所有的数据都是以文本格式保存。 存入数据使用setItem方法。它接受两个参数&＃xff0c;第一个是键名&＃xff0c;第二个是保存的数据。 

localStorage.setItem(

读取数据使用getItem方法。它只有一个参数&＃xff0c;就是键名。 

var valueLocal &＃61; localStorage.getItem(

具体步骤&＃xff0c;请看下面的例子&＃xff1a;

3、使用场景

LocalStorage在存储方面没有什么特别的限制&＃xff0c;理论上 COOKIE 无法胜任的、可以用简单的键值对来存取的数据存储任务&＃xff0c;都可以交给 LocalStorage 来做。

这里给大家举个例子&＃xff0c;考虑到 LocalStorage 的特点之一是持久&＃xff0c;有时我们更倾向于用它来存储一些内容稳定的资源。比如图片内容丰富的电商网站会用它来存储 Base64 格式的图片字符串&＃xff1a;

3

sessionStorage

sessionStorage保存的数据用于浏览器的一次会话&＃xff0c;当会话结束(通常是该窗口关闭)&＃xff0c;数据被清空&＃xff1b;sessionStorage 特别的一点在于&＃xff0c;即便是相同域名下的两个页面&＃xff0c;只要它们不在同一个浏览器窗口中打开&＃xff0c;那么它们的 sessionStorage 内容便无法共享&＃xff1b;localStorage 在所有同源窗口中都是共享的&＃xff1b;COOKIE也是在所有同源窗口中都是共享的。除了保存期限的长短不同&＃xff0c;SessionStorage的属性和方法与LocalStorage完全一样。

1、sessionStorage的特点

• 会话级别的浏览器存储&＃xff1b;

• 大小为5M左右&＃xff1b;

• 仅在客户端使用&＃xff0c;不和服务端进行通信&＃xff1b;

• 接口封装较好。

基于上面的特点&＃xff0c;sessionStorage 可以有效对表单信息进行维护&＃xff0c;比如刷新时&＃xff0c;表单信息不丢失。

2、使用场景

sessionStorage 更适合用来存储生命周期和它同步的会话级别的信息。这些信息只适用于当前会话&＃xff0c;当你开启新的会话时&＃xff0c;它也需要相应的更新或释放。比如微博的 sessionStorage就主要是存储你本次会话的浏览足迹&＃xff1a;

lasturl 对应的就是你上一次访问的 URL 地址&＃xff0c;这个地址是即时的。当你切换 URL 时&＃xff0c;它随之更新&＃xff0c;当你关闭页面时&＃xff0c;留着它也确实没有什么意义了&＃xff0c;干脆释放吧。这样的数据用 sessionStorage 来处理再合适不过。

3、sessionStorage 、localStorage 和 COOKIE 之间的区别

• 共同点&＃xff1a;都是保存在浏览器端&＃xff0c;且都遵循同源策略。

• 不同点&＃xff1a;在于生命周期与作用域的不同

作用域&＃xff1a;localStorage只要在相同的协议、相同的主机名、相同的端口下&＃xff0c;就能读取/修改到同一份localStorage数据。sessionStorage比localStorage更严苛一点&＃xff0c;除了协议、主机名、端口外&＃xff0c;还要求在同一窗口(也就是浏览器的标签页)下。

生命周期&＃xff1a;localStorage 是持久化的本地存储&＃xff0c;存储在其中的数据是永远不会过期的&＃xff0c;使其消失的唯一办法是手动删除&＃xff1b;而 sessionStorage 是临时性的本地存储&＃xff0c;它是会话级别的存储&＃xff0c;当会话结束(页面被关闭)时&＃xff0c;存储内容也随之被释放。

Web Storage 是一个从定义到使用都非常简单的东西。它使用键值对的形式进行存储&＃xff0c;这种模式有点类似于对象&＃xff0c;却甚至连对象都不是——它只能存储字符串&＃xff0c;要想得到对象&＃xff0c;我们还需要先对字符串进行一轮解析。

说到底&＃xff0c;Web Storage 是对 COOKIE 的拓展&＃xff0c;它只能用于存储少量的简单数据。当遇到大规模的、结构复杂的数据时&＃xff0c;Web Storage 也爱莫能助了。这时候我们就要清楚我们的终极大 boss——IndexedDB&＃xff01;

4

IndexedDB

IndexedDB 是一种低级API&＃xff0c;用于客户端存储大量结构化数据(包括文件和blobs)。该API使用索引来实现对该数据的高性能搜索。IndexedDB 是一个运行在浏览器上的非关系型数据库。

既然是数据库了&＃xff0c;那就不是 5M、10M 这样小打小闹级别了。理论上来说&＃xff0c;IndexedDB 是没有存储上限的(一般来说不会小于 250M)。它不仅可以存储字符串&＃xff0c;还可以存储二进制数据。

1、IndexedDB的特点

• 键值对储存

IndexedDB 内部采用对象仓库(object store)存放数据。所有类型的数据都可以直接存入&＃xff0c;包括 Javascript 对象。对象仓库中&＃xff0c;数据以"键值对"的形式保存&＃xff0c;每一个数据记录都有对应的主键&＃xff0c;主键是独一无二的&＃xff0c;不能有重复&＃xff0c;否则会抛出一个错误。

• 异步

IndexedDB 操作时不会锁死浏览器&＃xff0c;用户依然可以进行其他操作&＃xff0c;这与 LocalStorage 形成对比&＃xff0c;后者的操作是同步的。异步设计是为了防止大量数据的读写&＃xff0c;拖慢网页的表现。

• 支持事务

IndexedDB 支持事务(transaction)&＃xff0c;这意味着一系列操作步骤之中&＃xff0c;只要有一步失败&＃xff0c;整个事务就都取消&＃xff0c;数据库回滚到事务发生之前的状态&＃xff0c;不存在只改写一部分数据的情况。

• 同源限制

IndexedDB 受到同源限制&＃xff0c;每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库&＃xff0c;而不能访问跨域的数据库。

• 储存空间大

IndexedDB 的储存空间比 LocalStorage 大得多&＃xff0c;一般来说不少于 250MB&＃xff0c;甚至没有上限。

• 支持二进制储存

IndexedDB 不仅可以储存字符串&＃xff0c;还可以储存二进制数据(ArrayBuffer 对象和 Blob 对象)。

2、IndexedDB的常见操作

在IndexedDB大部分操作并不是我们常用的调用方法&＃xff0c;返回结果的模式&＃xff0c;而是请求——响应的模式。

• 建立打开IndexedDB——window.indexedDB.open("testDB")

这条指令并不会返回一个DB对象的句柄&＃xff0c;我们得到的是一个IDBOpenDBRequest对象&＃xff0c;而我们希望得到的DB对象在其result属性中。

除了result&＃xff0c;IDBOpenDBRequest接口定义了几个重要属性&＃xff1a;

• onerror: 请求失败的回调函数句柄&＃xff1b;

• onsuccess:请求成功的回调函数句柄&＃xff1b;

• onupgradeneeded:请求数据库版本变化句柄。

控制台得到一个 IDBDatabase对象&＃xff0c;这就是IndexedDB对象&＃xff1a;

• 关闭IndexedDB&＃xff1a;

function closeDB(db){

• 删除IndexedDB&＃xff1a;

function deleteDB(name) {

5

总结

正是浏览器存储、缓存技术的出现和发展&＃xff0c;为我们的前端应用带来了无限的转机。近年来基于存储、缓存技术的第三方库层出不绝&＃xff0c;此外还衍生出了 PWA 这样优秀的 Web 应用模型。

总结下本文几个核心观点&＃xff1a;

• COOKIE 的本职工作并非本地存储&＃xff0c;而是“维持状态”&＃xff1b;

• Web Storage 是 HTML5 专门为浏览器存储而提供的数据存储机制&＃xff0c;不与服务端发生通信&＃xff1b;

• IndexedDB 用于客户端存储大量结构化数据。

作者&＃xff1a;浪里行舟&＃xff0c;硕士研究生&＃xff0c;专注于前端&＃xff0c;运营有个人公众号前端工匠&＃xff0c;致力于打造适合初中级工程师能够快速吸收的一系列优质文章。

声明&＃xff1a;本文为CSDN技术头条专栏原创投稿&＃xff0c;未经允许请勿转载。

本文转自公众号“CSDN”&＃xff0c;ID&＃xff1a;CSDNnews

- End -

●  书榜 | 计算机书籍(3.25-3.31)销售排行榜

●  脚本之家粉丝福利&＃xff0c;请查看&＃xff01;

●  听说全世界都在跨考计算机&＃xff1f;&＃xff1f;

● 5G 还未商用&＃xff0c;6G 研究已开始&＃xff1f;&＃xff01;

● 算法工程师必须要知道的8种常用算法思想

● 为什么那么多人用“ji32k7au4a83”作密码&＃xff1f;

● 算法不扎实的程序员&＃xff0c;每个都很慌(附学习书单)

●  暴露年龄系列&＃xff01;这些手机系统 你用过几个&＃xff1f;

返回 上一级 搜索“Java 女程序员 大数据 留言送书 运维 算法 Chrome 黑客 Python Javascript 人工智能 女朋友 MySQL 书籍 等关键词获取相关文章推荐。