Cookie-Session-LocalStorage-SessionStorage

Cookie

1.服务器通过 Set-Cookie 头给客户端一串字符串
2.客户端每次访问相同域名的网页时,必须带上这段字符串
3.客户端要在一段时间内保存这个Cookie
4.Cookie默认在用户关闭页面后就失效,后台代码可以任意设置Cookie的过期时间
5.大小在4k以内

Session

1.将SessionID(随机数)通过Cookie发给客户端
2.客户端访问服务器时,服务器读取SessionID
3.服务器有一块内存(哈希表)保存了所有的session
4.通过SessionID我们可以得到对应用户的信息,如id、email
5.这块内存(哈希表)就是服务器上的所有session

LocalStorage

1.LocalStorage跟HTTP无关
2.HTTP不会带上LocalStorage的值
3.只有相同域名的页面才能互相读取LocalStorage(没同源那么严格)
4.每个域名LocalStorage最大储存量为5Mb左右(每个浏览器不一样)
5.常用场景:记录有没有提示过用户(不重要的信息)
6.LocalStorage永久有效,除非用户清理缓存

SessionStorage

1.SessionStorage跟HTTP无关
2.HTTP不会带上SessionStorage的值
3.只有相同域名的页面才能互相读取SessionStorage(没同源那么严格)
4.每个域名SessionStorage最大储存量为5Mb左右(每个浏览器不一样)
5.SessionStorage在用户关闭页面(会话结束)后就失效

  • 请问cookie和session什么关系?
    一般来说session是基于cookie实现的,因为session必须将sessionId放到cookie里,然后再发给客户端,没有sessionId就没session(反过来说cookie是session的基石)

  • 请问cookie和localStorage的区别是什么?
    最大的区别的cookie每次请求的时候都会带到服务器上去,localStorage的时候不会带到服务器上去(因为跟http无关)。
    cookie一般是4k,localStorage一般是5M

  • 请问localStorage和sessionStorage(会话存储)有什么区别?
    前四点一样,但是sessionStorage在用户关闭页面(会话结束)后就失效了

如何处理HTTP缓存

1.cache-control
response.setHeader('Cache-Control','max-age=30')通过设置Cache-Control以后,30秒内,浏览器就不会再次请求了。(一般都是设置一年以上的Cache-Control
原理是Chrome在30s内请求同样的url,那么Chrome就会阻断这个请求,所以Chrome直接在它的内存里面返回上一次的main.js,那个请求没有发请求。过了30s请求main.js,浏览器会说这次给你个新的,再保存30s,重复上面的过程。
2.Expires
response.setHeader('Expires','Wed, 21 Oct 2015 07:28:00 GMT')
这个是到指定时间过期,而cache-control是过了多久过期。Expires有个缺点:它是使用的是本地时间,如果用户修改电脑的时间,那么Expires就不起作用了,不推荐。所有还是使用cache-control比较好。

如何更新缓存
更改URL

在入口处(HTML文件里面 )把URL变一下,跟以前的URL不一样,那么就不会使用缓存,浏览器就会到最新版。
比如在index.html入口文件里的link标签和script标签的地址名字改掉,
改成改成。以后需要在变更代码只需要把URL修改即可。

你可能感兴趣的:(Cookie-Session-LocalStorage-SessionStorage)