【Cookie与登陆注册】1. Cookie 1.Cookie的定义： Web开发里Cookie的含义：Cookie是浏

1. Cookie

1.Cookie的定义： Web开发里Cookie的含义：Cookie是浏览器访问服务器后服务器传给浏览器的一段数据，浏览器需要保存在终端数据不得轻易删除，此后每次浏览器访问该服务器都要带上这段数据。

2.Cookie是什么（特点）：

服务器通过Set-Cookie响应头设置Cookie,并给客户端一段字符串（Cookie）
浏览器得到Cookie之后每次请求相同域名网页时都要带上这个Cookie
客户端在一段时间要保存这个Cookie
服务器读取（这个过程中需要用到session）Cookie之后就会知道登录用户信息
Cookie 默认在用户关闭页面后就失效，后台代码可以任意设置 Cookie 的过期时间

Cookie的本质是http协议的一段内容（一段字符串）

3.关于Cookie的几个知识点：

在Chrome登录得到了Cookie,现在用Safari登录，Safari会带上Cookie吗？不会
Cookie存在哪？windows系统的话存在C盘的一个密码文件中（禁止修改），其它系统的话存在硬盘中
Cookie能作假吗？可以，js可以篡改Cookie,在浏览器也可以改Cookie,防止篡改用户Cookie的方法:[stackoverflow.com/questions/2…]
Cookie有有效期吗？有，默认有效期为20分钟左右，但是后端可以强制设置有效期

4. Cookie始终跟域名走在一起，设置Cookie之后浏览器同源请求都会带上Cookie.

5.Cookie会遵守同源政策吗？

也有，不过跟AJAX的同源政策稍有些不同

1. 当请求qq.com下的资源时浏览器会带上qq.com对应的Cookie,不会带上baidu.com的Cookie
2. 当请求v.qq.com下的资源时浏览器不仅会带上v.qq.com 对应的Cookie,还会带上qq.com的Cookie

6.Cookie的用途：

（1）. 记录历史： 因为HTTP协议实无状态的，服务器不知道上次做了什么，（比如网上买东西结账时不能一次性结账），Cookie就是绕过HTTP无状态的手段之一，服务器可以借此读取或设置Cookies中包含信息，借此维护用户跟服务器之间的会话。

（2）. 识别用户身份： 登陆一个网站时，网站往往会请求用户输入用户名和密码，并且可以勾选下次可以自动登录，如果勾选了下次访问同一网站时用户可以不用输入用户名和密码就可以登陆，原因是前一次登陆时服务器发送了包含登录凭据（用户名和密码的加密的某种形式）的Cookie到用户的硬盘上，如果再次登录，浏览器会发送该Cookie（没有到期才行），服务器会验证凭据，于是不用再输入用户名和密码密码就可以登陆了。

7.Cookie的缺陷：

用户可以随意篡改Cookie
Cookie会被附加在某个http中，所以无形中增加了流量
http请求的Cookie是明文传播的，存在安全性
Cookie的大小限制在4KB,对于复杂的存储需求来说不够

8.Cookie与登录注册： 注册过程中服务器端创建数据库，在创建之前还需要对比之前有没有这个信息，登录过程就是用户输入的信息和数据库的数据对比。

9.删除Cookie：

设置响应头方法：可以使用Cache-Control和ETag来设置过期时间，只要过了这个时间会被删除掉
使用函数强行删除：

     function clearCookie(name) {
      setCookie(name, "", -1);
     }

2. Session（不翻译）

1.session的定义：（注意：session和sessionStorage完全不同的概念）

服务器通过Cookie给用户一个sessionId（随机数，保证隐私安全）,这个sessionId对应服务器里的一小块内存（哈希表），服务器保存了所有人的session，用户每一次请求这个服务器的资源，服务器都会通过这个sessionId读取对应的session,从而知道用户的隐私信息，这就是session.

（session的实质就是服务器上的一块内存（哈希表），他的大小约4kb左右，在使用时存在内存中，服务器关闭之前需要存到机器的硬盘中，这难免导致占内存的缺点）

2.session与Cookie的关系：

可以使用Session > SessionId是个随机数(Session在Cookie里面设置SessionId),防止篡改Cookie
服务器通过SessionId知道用户的隐私信息

3.session不依赖Cookie的实现方法：【超纲】

seesionId不存在Cookie中，而是放到localStorage中，查询参数形式使用

3. LocalStorage

1. 定义：

localStorage是HTML5提供的API，它的原型里面常用的属性有：它们都是操作当前页面里的hash

getItem() //存值，只能存字符串:localStorage.setItem('a','3');若非要存对象可以借助JSON来完成：localStorage.setItem('jsonString',JSON.Stringify({name:'obj'}))
setItem() //取值，localStorage.getItem('a')//3
localStorage.clear() //清空LocalStorage里的哈希表
removeItem()

localStorage是浏览器上的哈希表

2. LoaclStorage的使用【面试】：

在不同页面中始终保存变量且其值不变，这就通过localStorage在windows的c盘中持久化存储变量来实现。（LocalStorag是新的API,自从有了LocalStorage之后前端有了记忆力，实现跨页面的持久化存储更容易实现了，之前是存储在Cookie之中来实现跨页面的持久化存储的，但是请求慢，因为Cookie的每一个请求都会被带到服务器中。）

localStorage最典型的使用：

    //在前端文件中这样写，实现网页一次提示功能
    let already = localStorage.getItem('已经提示过了')
    if(!already){
      alert('你好，我们的网站已经改版了，有了这些新功能：blablab……')
      localStorage.setItem('已经提示过了',true)
    }else{
      
    }

3. LocalStorage的特点【记住】：

LocalStorage跟http协议没有任何关系，http不会带上LocalStorage的值
只有相同域名的页面才能互相读取LocaStorage(没有同源政策那么严格)
每一个域名LocalStorage的最大存储量为5M左右（每个浏览器不一样）
常用场景：记录有没有提示过用户（没有用的信息，不能记录密码）
LocalStorage的有效期：永久有效，没有办法设置过期时间，除非用户清理缓存

SessionStorage（会话存储）和LocalStorage的区别： ——

1、2、3、4 同上，唯一不同就是第五项：SessionStorage当用户关闭页面就会失效。（这两个的API也一样）
SessionStorage的用法：和LocalStorage的用法一样

4. Cookie、Session、LocalStorage之间关系：

1.Session和Cookiede 关系：

    * session必须将sessionId放入Cookie,的是基于Cookie实现的，Cookie是Session的基石，

2.Cookie和LocalStorage的关系：

    * 每次请求网页时，Cookie都会被浏览器带到服务器（http相关），LocalStorage与http没有任何关系
    * Cookie的存储量约4kb,而LocalStorage容量约5M
    * Cookie可以在后台代码中设置有效期，一般是关闭页面即失效，LocalStorage永久有效，除非用户清理内存

3.SessionStorage和LocalStorage的关系：

    相同点：
    * SessionStorage和LocalStorage跟http协议没有任何关系 ，其值不会被带到服务器
    * 只有相同域名的页面才能互相读取LocaStorage和SessionStorage
    * 每一个域名LocalStorage的最大存储量为5M左右（每个浏览器不一样）
    * 常用场景：记录有没有提示过用户（没有用的信息，不能记录密码）
    * 两者常用API用法相似
    不同点：
    * SessionStorage当用户关闭页面就会失效，LocalStorage的有效期永久有效

4. HTTP缓存（性能优化）

1. Cache-Control用法：设置多久以后过期（单位为秒s）

Cache-Control缓存控制:http请求的一部分，在服务器文件中设置响应头就可以，在缓存时间内再次请求同样的URL时浏览器不会去找服务器请求，而是直接从内存或硬盘中读取（也就是在设置的缓存时间段内只要是设置Cache-control的资源会保存到内存或硬盘中）,大大减少了客户端请求服务器的时间(在时间段内请求所需时间一般为 0s)

    response.setHeader('Cache-Control','max-age=80')

想看更多的属性点击这里：[developer.mozilla.org/zh-CN/docs/…]

2. 缓存更新：

首页不能设置（尤其是html）：有风险，万一更新了，用户不会跟服务器打交道，请求不到最新消息
若首页设置了Cache-control,想请求服务器，得到最新版本的话办法：设置一个接口，让URL稍有变化，就是添加查询参数。

//类似于这种，还是访问原来的服务器端的资源，但请求路径变了
 'url?v=2'

所以Cache-Control的好处就是又能在用户的内存中缓存，又能随时升级且让用户请求第一时间获取最新版本

3. Expires缓存—— 设置什么时间过期，时间格式为格林尼治时间（new Date.toGMTString()），设置的是本地时间，如果万一用户的本地时间错乱了，那么就会使用不了缓存

    //Expires语法：
    Expires: <http-date>
    //示例：
    Expires: Wed, 21 Oct 2015 07:28:00 GMT\
    //用法：
     response.setHeader('Expires','Sun, 22 Sep 2019 23:09:18 GMT')

之前设置http缓存时间使用Expires，设置什么时候过期，之后使用了Cache-Control，设置设置好之后多久过期，目前优先使用Cache-Control;

5. ETag && MD5消息摘要算法——

在后台文件中设置响应头：

     let md5
     let string = fs.readFileSync('./css/default.css', 'utf8')
     let fileMd5 = md5(string)
     response.setHeader('ETag',fileMd5) 
     if(request.headers['if-none-match'] === fileMd5){
         reponse.statusCode = 304 // 如果缓存的跟最新版文件的md5完全相同，返回304(not modified未改变)
     }else{//如果不相同，则下载string
         response.write(string)
     }

【Cache-Control 和ETag的区别：】 用Cache-Control之后客户端直接不请求，但是用ETag会发起请求，但是只不过md5相同的情况下不会下载而已，会对比看看。所以优先使用Cache-Control.