前端培训-初级阶段（17） - 数据存储（cookie、session、stroage）

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，如今前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提高技术水平，打牢基础知识的中心思想，咱们开课啦（每周四）。

这是初级阶段的最后一堂了。以后的内容插入了一些实际场景和review

咱们要讲什么

1. cookie是什么？用来解决问题？有什么注意点？
2. session是什么？用来解决问题？有什么注意点？
3. stroage是什么？用来解决问题？有什么注意点？
4. 其余内容（IndexedDB、WebSQL）

cookie

cookie 是什么?

cookie是一个存放在浏览器端的内容，能够在请求服务端的时候时候带在header中，下图能够看到关键词有name,value,Domain,path,Expires/max-age,http,secure,能够打开本身的浏览器研究一下。

1. name 就是key获取的，
2. value 就是值，和name是对应的。
3. domain 就是所属域名，好比 sf.gg 的就不能被 baidu.com 获取。
4. path 是所属路径 /im 就不能获取 /live 下面的，因此通常公共的都放在根目录
5. expires 是失效时间，有会话级别的-关闭浏览器就失效。有时间级别的-到点失效。
6. httponly 只有服务端能获取到，接口访问的时候也会自动带上。可是 document.cookie 拿不到

cookie 解决了什么问题

浏览器的访问是无状态，意味着服务器不理解两次请求是否是同一我的。因此他能够经过 cookie 作一个惟一标识。而后每次访问都带上，这样服务器就能够知道这是同一我的。因此说 cookie 是重要的，若是别人拿到了你的 cookie，他就是你。

cookie 使用中有什么要注意的

1. 各个浏览器的容量是不同的（条数）。
2. cookie 的不要放大量数据，由于这些数据会用在每次请求上。
3. 敏感数据要设置 httponly ,防止意外的被他人获取。

session

session是什么？

服务器端存放数据。通常来讲生成一个sessionID,放在cookie里面。浏览器的请求来了以后，拿着sessionID去查到详细信息。通常来讲都是使用过时时间

session用来解决什么问题？

cookie不适合存放大量数据、敏感数据。好比说userid，不能说用户改啥就是啥。好比说一些内部的判断条件。就给浏览器端一个id，来服务器端查就ok了。

session 使用时须要注意什么？

服务器的事情，我们前端就无论了吧。爱咋用咋用。

stroage

stroage是什么？

浏览器支持两种 localstroage 和 sessionStroage。都是用来作浏览器端存储的。

1. localStroage 是用来跨页面使用的，能够长久存储。固然是同源的页面。
2. sessionStroage 是用来存放本页面的数据的，关闭页面就清空了。

stroage解决的问题

cookie的存储大小问题。页面通讯的问题。真正提供了前端存储能力

stroage使用的时候须要注意什么？

1. 存储的值都为String。
2. 存储是同步的。localstroage的改变会通知给其余页面stroage事件
3. 支持大小是5MB，固然也不许咯，看浏览器厂商的实现。

其余内容（IndexedDB、WebSQL）

1. IndexedDB

   IndexedDB 是一种低级API，用于客户端存储大量结构化数据(包括, 文件/ blobs)。该API使用索引来实现对该数据的高性能搜索。虽然 Web Storage 对于存储较少许的数据颇有用，但对于存储更大量的结构化数据来讲，这种方法不太有用。IndexedDB提供了一个解决方案。

2. WebSQL

   将要废弃的方案。

3. 其余的封装库

   对于简单的状况可能看起来太复杂。若是你更喜欢一个简单的API，尝试二次封装的类库如 localForage、 dexie.js、 ZangoDB。

后记

主讲人文章-2019-04-25