cookie localStorage sessionStorage _(¦3」∠)_ 看完你居然就懂了！！！

知识点

cookie

sessionStorage localStorage

cookie

本身用于浏览器和server通讯
被 “借用” 到本地存储
可用 document.cookie = '...' 来修改

注意： 下面的控制台演示，需要开启本地服务器（如：nodejs的http-server）。如果直接本地打开浏览器页面，是设置不了cookie的

根据上图显示的规律：document.cookie 它里面存储键值对。
同一个key，它“覆盖”；不同key,它“追加”；

登录功能就经常用cookie实现：会在Request Headers 里把 cookie 发送给服务端

另外，cookie 能做本地存储，这就不用说了吧，因为刷新后，cookie里面的内容还是在的（cookie是在html5规范出来并普及之前唯一能做本地存储的家伙）

注意： cookie 当初的设计并不是为了做本地存储，而是为了浏览器和服务端的通讯。只是被借用来做本地存储

cookie 的缺点

存储大小：最大4KB
上头讲了，它妈造它是为了浏览器和服务端的通讯，不是为了存东西的。
http 请求时需要发送到服务端，增加请求数据量
这就是个粘人精啊！！！不管发什么请求，都要带上它。
(肥)膘少还好说，否则
http请求(它妈) 缓缓拖走。。。
只能用 document.cookie = '...' 来修改，太过简陋
花样太少，技术不行，诶，费解。。。

头胎（cookie），没经验，给养废了，
没事儿，再生两个。。。
localStorage 和 sessionStorage (双胞胎) 出生了ヽ(ﾟ∀ﾟ)ﾒ(ﾟ∀ﾟ)ﾉ

localStorage 和 sessionStorage

HTML5 专门为存储而设计，最大可存5M (够大！比cookie的4KB 大多了)
API 简单易用 setItem getItem
不会随着 http 请求被发送出去（5M的“吨位”如果随意发，要是在手机上，还不得破产(Ｔ▽Ｔ)）

localStorage 和 sessionStorage 的区别

localStorage 数据会永久存储，除非代码或手动删除
sessionStorage 数据只存在于当前会话，浏览器关闭则清空
一般用localStorage 会更多一些

cookie localStorage sessionStorage 的区别

都会在浏览器端保存，有大小限制，同源限制
cookie会在请求时发送到服务器，作为会话标识，服务器可修改cookie；web storage（也就是localStorage和sessionStorage）不会发送到服务器
cookie有path概念，子路径可以访问父路径cookie，父路径不能访问子路径cookie
有效期：cookie在设置的有效期内有效，默认为浏览器关闭；sessionStorage在窗口关闭前有效；localStorage长期有效，直到用户删除；
共享：sessionStorage不能共享，localStorage在同源文档之间共享，cookie在同源且符合path规则的文档之间共享
localStorage的修改会促发其他文档窗口的update事件
cookie有secure属性要求HTTPS传输
浏览器不能保存超过300个cookie，单个服务器不能超过20个，每个cookie不能超过4k。web storage大小支持能达到5M

cookie,localStorage,sessionStorage对比表格：

特性	Cookie	LocalStorage	sessionStorage
数据的申明周期	一般由服务器生成，可设置失效时间。如果在浏览器生成，默认是关闭浏览器之后失效	除非被清除，否则永久保存	仅在当前会话有效，关闭页面或浏览器后被清除
存放数据大小	4KB	一般5MB	一般5MB
与服务端通信	每次都会携带在`HTTP`头中，如果使用`cookie`保存过多数据会带来性能问题	仅在客户端中保存，不参与和服务器的通信。	同`LocalStorage`
用途	一般由服务器端生成，用于标识用户身份	用于浏览器缓存数据	同`LocalStorage`
共享	在同源且符合`path`规则的文档之间共享	在同源文档之间共享	不能共享
相同点	三者都可以被用来在浏览器端存储数据，而且都是字符串类型的键值对	同上	同上

给个赞呗 (/ω＼) ！！！前端知识体系目录结构

cookie localStorage sessionStorage _(¦3」∠)_ 看完你居然就懂了！！！相关推荐

本地存储-cookie|localStorage|sessionStorage|indexedDB
本地存储本地存储 cookie 如何工作问题 cookie标准限制属性 expires|max-age domain&path secure HttpOnly 设置cookie 服务端设 ...
java比go难学_为什么Go比Java快这么多？看完这个例子就懂
一,前言本次小测试并不是试图说明Go是java的替代,Go lang和Java本就不是实现相同类型任务的语言 :Java是企业开发语言,而Go是系统编程语言.为什么Go比Java快这么多?看完这个例 ...
云终端linux,云终端详细介绍，看完你就都懂了
原标题:云终端详细介绍,看完你就都懂了随着云计算技术的不断成熟和发展,云桌面被越来越多的人所熟知和使用,我们知道云桌面主要有云终端和服务器这两大硬件所组成.而今天我们要说的就是这个只有手机大小的云终 ...
APP开发所需时间，看完这些你就懂了
在这个互联网时代,拥有一款专属APP软件对于企业来说在品牌宣传.服务对接等方面都是很大的助力,所以APP定制开发已经成为了广泛需求.在开发APP的时候,我们除了关心费用.作用等,也比较关注开发一款AP ...
文科生读计算机博士,文科类哪些专业博士前景好？看完这篇就懂了！
原标题:文科类哪些专业博士前景好?看完这篇就懂了! 会计专业最好总体看,文科类博士就业不如理工类.如果去学校当老师,不挑地方与单位,找工作不成问题.如果要找到人们普遍认为的好单位,目前看会计专业最好 ...
莱斯特大学计算机科学,莱斯特大学与纽约大学计算机科学专业哪个好?看完以下对比就懂了...
计算机科学是现在的热门学科,申请的学生人数正在逐年递增,它是研究计算机及其周围各种现象和规律的科学,现在的很多高校都开设了计算机科学专业,学生们可以选择的范围很广,但是不同学校都有各自的教学特色,那么 ...
靶点c语言,Nature关注的经典靶点，看完这篇就懂了
原标题:Nature关注的经典靶点,看完这篇就懂了解螺旋公众号·陪伴你科研的第2096天靶点虽老,关注不减! 在很多肿瘤中,都存在KRAS 的突变. KRAS-G12C 是一种常见的KRAS 突变 ...
matlab画服装版,设计师必备款式图干货｜如何绘制一张完美的款式图？看完这些你就懂了...
原标题:设计师必备款式图干货|如何绘制一张完美的款式图?看完这些你就懂了 *服装设计是艺术和技术的完美结合,服装设计是通过服装设计师经过市场调查,分析各种流行因素,进行设计构思,然后绘制出设计草图和效 ...
企业为什么要制定精益标准工时？看完这篇就懂了！
现代化程度越高.监管越全面的企业,就会利用精益标准工时去提升效益,用量化的方式去管理企业,从而获得更加广阔的发展空间.那企业为什么要制定精益标准工时?看完这篇就懂了! 一.精益标准工时对生产管理的重要 ...