后端开发基础课堂项目资料收集&面试题

缓存、cookie、token、session、localSto

2018-08-19  本文已影响192人  puxiaotaoc

一、缓存分类

二、浏览器缓存

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

      上述代码的作用是告诉浏览器当前页面不被缓存，每次访问都需要去服务器拉取，这种方法使用上很简单，但只有部分浏览器可以支持，而且有缓存代理的服务器都不支持，因为代理不解析HTML内容本身；
      2）HTTP头信息控制缓存：HTTP头信息控制缓存是通地Expires(强缓存)、Cache-control(强缓存)、Last-Modified/If-Modified-Slice(协商缓存)、Etag/If-None-Match(协商缓存)实现；

Expires：Thu,31 Dec 2016 23:55:55 GMT

      读取缓存数据条件：缓存过期时间（服务器的）<当前时间（客户端的）；缺点是Expires是较老的强缓存管理header，由于它是服务器返回的一个绝对时间，这样存在一个问题，如果客户端的时间与服务器的时间相差很大（比如时钟不同步，或者跨时区），那么误差就较大，所以在HTTP1.1版本开始，使用Cache-Control: max-age=秒代替；

浏览器缓存

三、服务器端缓存

四、cookie与session

五、token

      token：如果我不保存这些session id , 我怎么验证客户端发给我的session id 的确是我生成的呢？ 如果我不去验证，我都不知道他们是不是合法登录的用户， 那些不怀好意的家伙们就可以伪造session id , 为所欲为了，嗯，对了，关键点就是验证 ！
      比如说， 小F已经登录了系统， 我给他发一个令牌(token)， 里边包含了小F的 user id， 下一次小F 再次通过Http 请求访问我的时候， 把这个token 通过Http header 带过来不就可以了，不过这和session id没有本质区别啊， 任何人都可以可以伪造， 所以我得想点儿办法， 让别人伪造不了，那就对数据做一个签名吧， 比如说我用HMAC-SHA256 算法，加上一个只有我才知道的密钥， 对数据做一个签名， 把这个签名和数据一起作为token ， 由于密钥别人不知道， 就无法伪造token了；
      这个token 我不保存， 当小F把这个token 给我发过来的时候，我再用同样的HMAC-SHA256 算法和同样的密钥，对数据再计算一次签名， 和token 中的签名做个比较， 如果相同， 我就知道小F已经登录过了，并且可以直接取到小F的user id , 如果不相同， 数据部分肯定被人篡改过， 我就告诉发送者： 对不起，没有认证；
      Token 中的数据是明文保存的（虽然我会用做下编码， 但那不是加密）， 还是可以被别人看到的， 所以我不能在其中保存像密码这样的敏感信息，当然， 如果一个人的token 被别人偷走了， 那我也没办法， 我也会认为小偷就是合法用户， 这其实和一个人的session id 被别人偷走是一样的，这样一来， 我就不保存session id 了， 我只是生成token , 然后验证token ， 我用我的CPU计算时间获取了我的session 存储空间 ！

token验证
参考：https://blog.csdn.net/jek123456/article/details/64923545

六、sessionStorage和Localstorage

七、cookie和localStorage的区别

八、WebStorage和cookie的操作异同

// 保存cookie
var dataCookie='110';
document.cookie = 'token' + "=" +dataCookie; 

// 获取指定名称的cookie
function getCookie(name) { //获取指定名称的cookie值
// (^| )name=([^;]*)(;|$),match[0]为与整个正则表达式匹配的字符串，match[i]为正则表达式捕获数组相匹配的数组；
var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
if(arr != null) {
  console.log(arr);
  return unescape(arr[2]);
}
return null;
}
 var cookieData=getCookie('token'); //cookie赋值给变量。

var name='sessionData';
var num=120;
sessionStorage.setItem(name,num);//存储数据
sessionStorage.setItem('value2',119);
let dataAll=sessionStorage.valueOf();//获取全部数据
console.log(dataAll,'获取全部数据');
var dataSession=sessionStorage.getItem(name);//获取指定键名数据
var dataSession2=sessionStorage.sessionData;//sessionStorage是js对象，也可以使用key的方式来获取值
console.log(dataSession,dataSession2,'获取指定键名数据');
sessionStorage.removeItem(name); //删除指定键名数据
console.log(dataAll,'获取全部数据1');
sessionStorage.clear();//清空缓存数据：localStorage.clear();
console.log(dataAll,'获取全部数据2');

三者的异同比较：

生命周期：

cookie：可设置失效时间，没有设置的话，默认是关闭浏览器后失效

localStorage：除非被手动清除，否则将会永久保存。

sessionStorage： 仅在当前网页会话下有效，关闭页面或浏览器后就会被清除。

存放数据大小：

cookie：4KB左右

localStorage和sessionStorage：可以保存5MB的信息。

http请求：

cookie：每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题

localStorage和sessionStorage：仅在客户端（即浏览器）中保存，不参与和服务器的通信

易用性：

cookie：需要程序员自己封装，源生的Cookie接口不友好

localStorage和sessionStorage：源生接口可以接受，亦可再次封装来对Object和Array有更好的支持

应用场景：

从安全性来说，因为每次http请求都会携带cookie信息，这样无形中浪费了带宽，所以cookie应该尽可能少的使用，另外cookie还需要指定作用域，不可以跨域调用，限制比较多。但是用来识别用户登录来说，cookie还是比stprage更好用的。其他情况下，可以使用storage，就用storage。

storage在存储数据的大小上面秒杀了cookie，现在基本上很少使用cookie了，因为更大总是更好的，哈哈哈你们懂得。

localStorage和sessionStorage唯一的差别一个是永久保存在浏览器里面，一个是关闭网页就清除了信息。localStorage可以用来夸页面传递参数，sessionStorage用来保存一些临时的数据，防止用户刷新页面之后丢失了一些参数。

浏览器支持情况：

localStorage和sessionStorage是html5才应用的新特性，可能有些浏览器并不支持，这里要注意。

数据存放处

Application 
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>本地存储</title>
</head>
<body>


<div>打开控制台查看console</div>
<p><a target="_blank" href="https://github.com/OBKoro1/article-demo/blob/master/2017/cookieStorage/index.html">查看代码文件</a></p>

<script>
  cookieFn();
  strogeFn();
function cookieFn() {
  var dataCookie='110';
  document.cookie = 'token' + "=" +dataCookie;//直接设置cookie
  function getCookie(name) { //获取指定名称的cookie值
    // (^| )name=([^;]*)(;|$),match[0]为与整个正则表达式匹配的字符串，match[i]为正则表达式捕获数组相匹配的数组；
    var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
    if(arr != null) {
      console.log(arr,'正则表达式捕获数组相匹配的数组');
      return unescape(arr[2]);
    }
    return null;
  }
  var cookieData=getCookie('token');
  console.log(cookieData,'获取指定名称的cookie值');
  function setTime() {
    //存储cookie值并且设置cookie过期时间
    var date=new Date();
    var expiresDays=10;//设置十天过期
    date.setTime(date.getTime()+expiresDays*24*3600*1000);
    document.cookie="userId=828;  expires="+date.toGMTString();
    console.log(document.cookie,'存储cookie值并且设置cookie过期时间');
  }
  setTime();
  function delCookie(cookieName1) {
    //删除cookie
    var date2=new Date();
    date2.setTime(date2.getTime()-10001);//把时间设置为过去的时间，会自动删除
    document.cookie= cookieName1+"=v; expires="+date2.toGMTString();
    console.log(document.cookie,'删除cookie');
  }
  delCookie('userId');
}
function strogeFn() {
  var name='sessionData';
  var num=120;
  sessionStorage.setItem(name,num);//存储数据
  sessionStorage.setItem('value2',119);
  let dataAll=sessionStorage.valueOf();//获取全部数据
  console.log(dataAll,'获取全部数据');
  var dataSession=sessionStorage.getItem(name);//获取指定键名数据
  var dataSession2=sessionStorage.sessionData;//sessionStorage是js对象，也可以使用key的方式来获取值
  console.log(dataSession,dataSession2,'获取指定键名数据');
  sessionStorage.removeItem(name); //删除指定键名数据
  console.log(dataAll,'获取全部数据1');
  sessionStorage.clear();//清空缓存数据：localStorage.clear();
  console.log(dataAll,'获取全部数据2');
}
</script>
</body>
</html>
上一篇 下一篇

猜你喜欢

热点阅读