本地储存
无状态
HTTP是无状态的
因为不管你请求一个接口多少次，他都会像第一次遇见你那样对待你（返回数据）。
纵然虐我千百边，我待你如初恋——HTTP
cookie
概念
Cookie 是直接存储在浏览器中的一小串数据（一般浏览器只能存储4kb的cookie）
它可以由JS生成，也可以由后端的响应头生成，也可以手动添加
你可以打开浏览器看看你的浏览器储存了哪些cookie;
怎么解决无状态？
- 当你第一次登录成功后，后端的响应头会
set-cookie：xxx这个字段，浏览器会自动在浏览器上用cookie储存xxx作为你登录过的证明。 - 当你再次向后端发起请求时，浏览器会自动带上
cookie:xxx这个字段，这样后端拿到你的xxx后就知道你已经登录过，从而不需要再验证账号密码。
这个解决方案称为session-cookie。
通常这个过程是前端无感的。
LocalStorage，sessionStorage
Web 存储对象 localStorage 和 sessionStorage 允许我们在浏览器上保存键/值对。
它们有趣的是，在页面刷新后（对于 sessionStorage）甚至关机后重启（对于 localStorage）后，数据仍然保留在浏览器中。我们很快就会看到。
我们已经有了 cookie。为什么还要其他存储对象呢？
- 与 cookie 不同，Web 存储对象不会随每个请求被发送到服务器。因此，我们可以保存更多数据。大多数现代浏览器都允许保存至少 5MB 的数据（或更多），并且具有用于配置数据的设置。
- 还有一点和 cookie 不同，服务器无法通过 HTTP header 操纵存储对象。一切都是在 JavaScript 中完成的。
- 存储绑定到源（域/协议/端口三者）。也就是说，不同协议或子域对应不同的存储对象，它们之间无法访问彼此数据。
两个存储对象都提供相同的方法和属性：
setItem(key, value)—— 存储键/值对。getItem(key)—— 按照键获取值。removeItem(key)—— 删除键及其对应的值。clear()—— 删除所有数据。key(index)—— 获取该索引下的键名。length—— 存储的内容的长度。
sessionStorage.setItem("session1",1)
localStorage.setItem("local2",2)
sessionStorage.setItem("session3",3)
localStorage.setItem("local4",4)
console.log(sessionStorage.getItem("session1"))
setTimeout(()=>{
sessionStorage.removeItem("session3")
localStorage.removeItem("local4")
},10000)
LocalStorage储存的数据就算你关闭浏览器甚至关机后依然存在 而sessionStorage在关闭浏览器后就清空。
IndexedDB
IndexedDB 是一个浏览器内建的数据库，它比 localStorage 强大得多。
- 通过支持多种类型的键，来存储几乎可以是任何类型的值。
- 支撑事务的可靠性。
- 支持键值范围查询、索引。
- 和
localStorage相比，它可以存储更大的数据量。
但是大部分情况我们有后端的数据库，不需要额外的数据库，只有在特定的场景它才有用武之地，比如离线应用。感兴趣可以了解
鉴权
刚才我们讲过因为http的无状态的缺点。
我们迫切的想要一种方式让服务器记住我们。
主流的有大致有3种方法
- 传统的session-cookie认证
- 流行的JWT
- OAuth
我想分享的是JWT，由于时间原因（真不是懒）其他的大家抽时间学吧，
特别是session-cookie。
什么是鉴权？
验证用户是否拥有访问系统的权利
保证了别人不能偷偷看你的隐私信息
Token?
token本质上上是一长串字符串，是后端将uid(用户唯一的身份标识)、time(当前时间的时间戳)、sign（签名）通过加密算法形成的。
它的作用就是一把钥匙，不管是谁拿到你的token，他都有访问的权限。
JWT
jwt是基于token的一种跨域认证解决方案。
它的核心也是token，但是这个token不仅仅作为一个认证了，而是将你的信息加密后作为一个token，这意味着当你把token发送到服务器时，后端不再进行耗时的查库操作，而是直接将发送过去的token字符串解密，解密后的就是你的信息，再返回给你。
token字符串一般都放在请求头的Authorization字段中，像这样
Authorization: Bearer <你的token>
保存登录状态
其实就是用本地储存将token放在浏览器中，免得重新登录再获取token（只针对jwt）
WebSocket
在 RFC 6455 规范中描述的 WebSocket 协议，提供了一种在浏览器和服务器之间建立持久连接来交换数据的方法。数据可以作为“数据包”在两个方向上传递，而无需中断连接也无需额外的 HTTP 请求。
对于需要连续数据交换的服务，例如网络游戏，实时交易系统等，WebSocket 尤其有用。
可以理解成与http不同类型协议
let socket = new WebSocket("wss://javascript.info/article/websocket/demo/hello");
socket.onopen = function(e) {
alert("[open] Connection established");
alert("Sending to server");
socket.send("My name is John");
};
socket.onmessage = function(event) {
alert(`[message] Data received from server: ${event.data}`);
};
socket.onclose = function(event) {
if (event.wasClean) {
alert(`[close] Connection closed cleanly, code=${event.code} reason=${event.reason}`);
} else {
// 例如服务器进程被杀死或网络中断
// 在这种情况下，event.code 通常为 1006
alert('[close] Connection died');
}
};
socket.onerror = function(error) {
alert(`[error] ${error.message}`);
};
我们只需要知道onopen,onmessage,onclose,onerror 回调的意义就好,其实看名字就已经猜的七七八八了。
项目合作
一般来说，一个项目的完整流程
- 需求（可以是产品，boss，或者技术人员等其他人提出）
- 分析和设计（必要性，大概的实现思路，ui设计）
- 技术选型
- 开发
- 测试
- 部署
但是我们今天主要想说的是前后端合作开发的一般流程
- 首先前端分析自己的页面需要哪些数据？数据类型是什么？并且考虑极端情况，最多多少，没有需要返回什么？
- 前后端一起写接口文档（请求需要带的参数格式）（返回的数据结构）（请求地址）等
可以使用apipost,postman,apifox等接口管理工具
- 开发时 前后端都必须根据接口文档开发，避免无效的劳动。
- 前端不必等接口写好后才开始，可以自己随便写一点数据，先把页面做好。
- 如果是多人开发（指前端或后端有一个人以上共同开发），最好使用分布式管理工具，也就是git，这样才会保证开发的及时和便捷。
