task45 Session、LocalStorage、Cach

2019-07-19  本文已影响0人  vivienYang2019

注意

最新版的 Chrome 已经贱贱地把 view source 按钮删了。

Cookie 存在的问题

用户可以随意篡改 Cookie


数据库中的用户信息
用用户1的账号登录后显示1的密码
用户手动篡改cookie为2的账号
刷新页面显示用户2的密码

step1 用1的账号名和密码登录页面，首页显示1账号对应的密码
step2 用户登录进来首页后手动篡改cookie，将登录账号改成2的账号
step3 刷新页面，首页就会显示账号2对应的密码

这样是不安全的，那要怎么解决呢？
cookie不要放用户能猜得到的东西，如账号名这些可见的


原来登录成功服务端将账号名放cookie传给客户端
现在登录成功服务端将sessionId放cookie传给客户端
客户端接收到的cookie中内容是sessionId
客户端请求首页数据的时候会把sessionId传给服务端
服务端server.js响应首页的时候根据sessionId从sessions中找到对应的用户信息返回给客户端
处理找不到的情况
用户凭票进公园，票上的随机数id用来识别用户信息

问题：什么是session？
——服务器通过Set-cookie给用户一个sessionId，
然后sessionId对应服务器中的一小块内存，
每次用户访问服务器的时候，用户就通过sessionId读取对应的session，得到对应的用户隐私信息

Session 与 Cookie 的关系

一般来说，Session 基于 Cookie 来实现。

Cookie
  1. 服务器通过 Set-Cookie 头给客户端一串字符串
  2. 客户端每次访问相同域名的网页时，必须带上这段字符串
  3. 客户端要在一段时间内保存这个Cookie
  4. Cookie 默认在用户关闭页面后就失效，后台代码可以任意设置 Cookie 的过期时间
  5. 大小大概在 4kb 以内
Session（不翻译）
  1. 将 SessionID（随机数）通过 Cookie 发给客户端
  2. 客户端访问服务器时，服务器读取 SessionID
  3. 服务器有一块内存（哈希表）保存了所有 session
  4. 通过 SessionID 我们可以得到对应用户的隐私信息，如 id、email
  5. 这块内存（哈希表）就是服务器上的所有 session

问题cookie和session的区别??
1、cookie数据存放在客户的浏览器上，session数据放在服务器上。
2、cookie不是很安全，别人可以分析存放在本地的cookie并进行cookie欺骗，考虑到安全应当使用session。
3、session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能，考虑到减轻服务器性能方面，应当使用cookie。
4、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。
5、可以考虑将登陆信息等重要信息存放为session，其他信息如果需要保留，可以放在cookie中。
参考
cookie与session的区别
cookie与session的区别是什么
https://www.imooc.com/article/3369
Cookie 与 Session 的区别

session最大的缺点是耗服务器内存，当用户多了的时候，服务器压力很大

LocalStorage

问：localStorage和cookie的区别？
localStorage api
localStorage原型中的方法 localStorage保存object类型数据1
localStorage保存object类型数据2
要把object类型转换成string类型再保存到localStorage1
要把object类型转换成string类型再保存到localStorage2 
//获取localStorage中的内容
localStorage.getItem('a')
localStorage.getItem('b')
localStorage.getItem('jsonString')
//清除localStorage保存的内容
localStorage.clear()
如何获取localStorage中的内容.png

localStorage的用法

记录页面在当前浏览器浏览次数 
//改版提示（只提示一次）
let already=localStorage.getItem('已经提示了')
if(!already){
  alert('你好，我们的网站改版了，有了这些新功能：......')
  localStorage.setItem('已经提示了',true)
}
localStorage的特点
  1. LocalStorage 跟 HTTP 无关
  2. HTTP 不会带上 LocalStorage 的值（cookie会带上）
  3. 只有相同域名的页面才能互相读取 LocalStorage（没有同源那么严格）
  4. 每个域名 localStorage 最大存储量为 5Mb 左右（每个浏览器不一样）
  5. 常用场景：记录有没有提示过用户（没有用的信息，不能记录密码等敏感信息）
  6. LocalStorage 永久有效，除非用户清理缓存
//每个域名下的localStorage的存储量是有限的
let s=''
for(let i=0;i<10000000;i++){
  s+='一二三四五六七八九'
}
localStorage.setItem('xxx',s)
每个域名下的localStorage的存储量是有限的.png
SessionStorage（会话存储）

1、2、3、4 同上（localStorage）

  1. SessionStorage 在用户关闭页面（会话结束）后就失效。

Session 可以用 LocalStorage + 查询参数实现

不基于Cookie的Session（因为有时候用户会禁用cookie）
这是超纲内容。

Cache-Control 是什么

Cache-Control（缓存控制） web性能优化

在首页引入js和css文件，由于这个js和css文件很大，所以耗时很久，38ms vs 382ms，其中主要耗时在content download（内容下载）

js和css加载耗时很长1
js和css加载耗时很长2
那么如何让速度加快呢？？
——服务端设置Cache-Control 
response.setHeader('Cache-Control','max-age=30') //使用Cache-Control缓存30s
使用Cache-Control缓存30s
响应头多了Cache-Control
from memory(0ms)
30s内刷新不会重新发请求，30s后刷新会重新发送请求
关于Cache-Control的一些问题
1.为什么首页不设置Cache-Control？
这样用户刷新页面就不能获取最新的版本更新了，用户没有办法能够获取最新网页。html不要设置缓存

2.Cache-Control一般给js和css文件设置缓存10年（86400*365*10）既然缓存就尽可能长一点，
也就是说10年内都不会重新请求css和js资源

3.如果10年内静态文件js或css更新了怎么办呢？
更新升级js或css文件时改变url，在html文件中引用js或css文件时多带个查询参数?v=xxx（版本号）因为只有相同的url才会使用以前的缓存
又能缓存很长时间，又能随时升级，完美！
改变url，增加查询参数
关于Cache-Control的总结
1. Cache-Control可以让浏览器在一段时间内不请求服务器，而是从内存或硬盘中获取内容作为响应，这样就很快
2. 更新怎么办呢？在入口处（一般是html引用js或css）把url变一下，这样浏览器就不会去读取缓存而是去请求服务器获取最新版。
这样浏览器就会把最新版缓存下来，以后浏览器就会去取最新版的缓存

Expires 是什么

Expires mdn

Expires 响应头包含日期/时间， 即在此时候之后，响应过期。
无效的日期，比如 0, 代表着过去的日期，即该资源已经过期。
如果在Cache-Control响应头设置了 "max-age" 或者 "s-max-age" 指令，那么 Expires 头会被忽略。
语法：Expires: <http-date>
<http-date>一个 HTTP-日期 时间戳
示例:Expires: Wed, 21 Oct 2015 07:28:00 GMT

以前缓存用的是Expires，现在用的是Cache-Control


image.png
image.png

MD5 是什么

md5是摘要算法，不是加密算法？
假设下载一个文件Linux.iso 400M，md5值是x
然后你去下载也是400M，你算出md5值是y，
对比两个md5值，当x=y说明你下载的是和网上的文件时一模一样的


两个文件1.txt和1-copy.txt改了一点内容，md5值差异很大

md5有一个特点，内容差异越小，算出来的md5值差异越大（把微小的差异放大）
一个内容对应一个md5值
如何用nodejs来算md5?

var fs = require('fs');
var md5 = require('md5');
 
fs.readFile('example.txt', function(err, buf) {
  console.log(md5(buf));
});

ETag 是什么

服务端server.js设置ETag

用Cache-Control缓存机制是直接不发请求，用ETag是请求了但是不下载（返回的响应体部分是空的，response部分是空的）

缓存与 304 的区别

课后习题

其他同学的答卷

上一篇 下一篇

猜你喜欢

热点阅读