[TOC]
控制缓存的字段都是通过后台服务器进行设置的
如: 使用node.js开启服务(运行:node serve.js)
### 1. Cache-Control控制是否缓存
~~~
// Cache-Control
const http =require('http');
const fs=require('fs')
http.createServer(function(request,response){
// console.log('request come', request.url)
if (request.url==='/'){
const html=fs.readFileSync('001.html','utf8')
response.writeHead(200,{
// 'Access-Control-Allow-Origin':"*",
'Content-Type':'text/html',
'Cache-Control':'max-age=10'
})
response.end(html)
}
if (request.url==='/script.js'){
response.writeHead(200,{
'Access-Control-Allow-Origin':"*",
'Content-Type':'text/javascript',
'Cache-Control':'max-age=10'
})
response.end('console.log("111222")')
}
}).listen(8887)
console.log("serve lestening on 8887")
~~~
### 2. Etag判断是否协商缓存
~~~
// Etag
//说明:Cache-Control设置了max-age=10说明是允许浏览器缓存数据,设置了no-cache说明不能直接使用缓存还是要去服务端进行请求,看是否需要使用缓存,也就是协商缓存
//协商缓存:首次访问时如果设置了Last-Modified(上次访问时间)和Etag(数据签名,数据修改后签名改变),那么二次访问的情况下会在请求头中带if-none-match,然后拿这个值和Etag比较判断是否更新是否使用缓存
//第二次访问虽然是304,虽然向服务器发送请求但还是从缓存中取的数据。虽然在返回304的时候 写入了123,response.end('123')。
const http =require('http');
const fs=require('fs')
http.createServer(function(request,response){
// console.log('request come', request.url)
if (request.url==='/'){
const html=fs.readFileSync('001.html','utf8')
response.writeHead(200,{
'Content-Type':'text/html',
'Cache-Control':'max-age=10'
})
response.end(html)
}
if (request.url==='/script.js'){
const etag=request.headers['if-none-match'];
if(etag==='777'){
response.writeHead(304,{
'Content-Type':'text/javascript',
'Cache-Control':'max-age=1000000',
'Last-Modified':'123',
'Etag':'777'
})
response.end('123')
}else{
response.writeHead(200,{
'Content-Type':'text/javascript',
'Cache-Control':'max-age=10000000',
'Last-Modified':'123',
'Etag':'777'
})
response.end('12345')
}
}
}).listen(8887)
console.log("serve lestening on 8887")
~~~
### 3. no-cache与no-store的区别
~~~
设置了no-cache说明不能直接使用缓存还是要去服务端进行请求,看是否需要使用缓存,也就是协商缓存
在上面基础上将Cache-Control中的no-cache换成no-store,表示浏览器不会使用缓存数据,
~~~
### 4. cookie的设置及参数
~~~
// cookie 设置cookies的方式max-age表示cookie多久之后过期,domain=test.com设置已什么结尾的网站都通用cookie
// HttpOnly 表示不允许js访问cookie (js访问方式为:document.cookie)
const http =require('http');
const fs=require('fs')
http.createServer(function(request,response){
// console.log('request come', request.url)
const host =request.headers.host;
if (request.url==='/'){
// if(host ==='test.com'){
const html=fs.readFileSync('001.html','utf8');
response.writeHead(200,{
'Content-Type':'text/html',
'Set-Cookie':['id=123;max-age=10','abc=456;domain=test.com','def=111, HttpOnly']
})
response.end(html)
}
// }
}).listen(8887)
console.log("serve lestening on 8887")
~~~