HTTP是无状态的协议，网络早期最大的问题之一是如何管理状态。服务器无法知道两个请求是否来自同一个浏览器。cookie应运而生，开始出现在各大网站，然而随着前端应用复杂度的提高，Cookie 也渐渐演化为了一个“存储多面手”，承载了 自身仅有的4KB 内存所不能承受的压力。在这样的背景下，web Storage应运而生，专门用于浏览器存储。但web Storage也仅仅是cookie的扩展，只能用于存储少量的简单数据，当遇到大规模的、结构复杂的数据时，Web Storage 也爱莫能助。这时候，就不得不其强大的IndexedDB了，一个运行在浏览器上的非关系型数据库。本文从cookie讲起，Web Storage过渡，IndexedDB结尾，梳理一下web 存储的体系与知识，希望在帮助作者梳理知识体系的同时也能帮助到广大前端ers!
cookie由于http是无状态的协议，一旦客户端和服务器的数据交换完毕，就会断开连接，再次请求，会重新连接，服务器单从网络连接上无法知道用户身份。怎么办呢？那就给每次新的用户请求时，给它颁发一个身份证（独一无二）吧，下次访问，必须带上身份证，这样服务器就会知道是谁来访问了，针对不同用户，做出不同的响应，这就是Cookie的原理。
Cookie 的本职工作并非本地存储，而是“维持状态”。它是浏览器存储在用户机器的一个小文本文件，大小不能超过4k，并且一些浏览器甚至会限制cookie的数量。Cookie是纯文本，没有可执行代码。储存一些服务器需要的信息，每次请求站点，会发送相应的cookie，这些cookie可以用来辨别用户身份信息等作用。
cookie的编码方式为encodeURI（）。
cookie类型cookie按照过期时间分为两类：会话cookie和持久cookie。
会话cookie是一种临时cookie，对标session，当用户退出浏览器，会话cookie就会被删除。默认情况下，即不设置过期时间，设置的cookie为会话cookie。持久cookie则会储存在硬盘里，保留时间更长，不以浏览器的关闭为转移，通常是持久性的cookie会维护某一个用户周期性访问服务器的配置文件或者登录信息。
domain(cookie的域)
产生Cookie的服务器可以向set-Cookie响应首部添加一个domain属性来控制哪些站点可以看到那个cookie，例如下面：
Set-Cookie:name="losstie";domain="m.baidu.com"如果用户访问m.baidu.com就会发送这个cookie，不是则不会。
path(cookie的路径 )
path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面。
secure
设置了属性secure，cookie只有在https协议加密情况下才会发送给服务端。但是这并不是最安全的，由于其固有的不安全性，敏感信息也是不应该通过cookie传输的。
HttpOnly
禁止javascript操作cookie（为避免跨域脚本(xss)攻击，通过javascript的document.cookie无法访问带有HttpOnly标记的cookie。）
SamSite
Cookie 的SameSite属性用来限制第三方 Cookie，从而减少安全风险。它可以设置三个值：
Strict 完全禁止第三方 Cookie，跨站点时，任何情况下都不会发送 Cookie。换言之，只有当前网页的 URL 与请求目标一致，才会带上 Cookie。
Lax 规则稍稍放宽，大多数情况也是不发送第三方 Cookie，但是导航到目标网址的 Get 请求除外。导航到目标网址的 GET 请求，只包括三种情况：链接，预加载请求，GET 表单
None Chrome 计划将Lax变为默认设置。这时，网站可以选择显式关闭SameSite属性，将其设为None。不过，前提是必须同时设置Secure属性（Cookie 只能通过 HTTPS 协议发送），否则无效。
cookie操作通过docuemnt.cookie可以设置和获取Cookie的值
/* cookie */ function set(key, value){ document.cookie = key + "=" + value; } function get(key){ var all = document.cookie; var s = all.indexOf(key)+key.toString().length+1; var e = all.indexOf(";",s); return all.substring(s,e); } function remove(key){ var e = "expires=" + new Date(1970,1,1); // 标注过去的时间 document.cookie = key + "=;" + e; } 第三方cookie通常cookie的域和浏览器地址的域匹配，这被称为第一方cookie。第三方cookie就是cookie的域和地址栏中的域不匹配，这种cookie通常被用在第三方广告网站。用于跟踪用户的浏览记录，并且根据收集的用户的浏览习惯，给用户推送相关的广告。
cookie的劣势Cookie 不够大，体积不能超过4k,当 Cookie 超过 4KB 时，它将面临被裁切的命运。这样看来，Cookie 只能用来存取少量的信息。
每次都会携带在http头中，过量的cookie会损耗性能。
cookie是紧跟域名的，同一个域名下的所有请求，都会携带 Cookie。